我要在网页上拍摄图像，然后使用 javascript（或任何最适合的方法）动态地“像素化”它（例如，变成 20px 的正方形）。然后，当用户向下滚动页面时，我需要图像的分辨率逐渐增加，直到它不再像素化。
有什么想法我该怎么做吗？我意识到我可以使用 php 来调整图像的大小并多次调整图像，然后切换图像，但这需要加载几个额外的图像。另外，我知道我可能可以使用 flash 和 pixelbender 来制作效果，但如果可能的话，我想在 HTML5、CSS 和 Javascript 的限制内实现它。
欣赏任何想法！
更新：像这样的东西，但使用 Javascript 而不是 Flash？http://www.reflektions.com/miniml/template_permalink.asp?id=390
<canvas>您可以在隐藏元素中渲染图片。然后使用此处描述的技术的推导http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation。要在第二个元素中创建图像的像素化版本，<canvas>使用 everducing fillRect's。这样您甚至可以缓冲原始图像数据。
编辑：我会使用 2 个<canvas>元素，这样您只需获取并绘制一次原始图像。也许你可以在同一个<canvas>元素中缓冲/缓存这个图像，但是通过在视口之外绘制它，我不确定这是否可能。
我会使用一个计算方法，将像素宽度除以正方形宽度，然后将高度除以正方形高度。这将为您提供所需的较低分辨率。
然后，您可以找到一种方法将分辨率更改为结果，或者在您要查找的正方形的位置（高度和宽度）/2 处获取每个像素的颜色。然后将它们生成为具有适当颜色和大小的 div 标签或表格，最终生成图像本身。
我有一个可能更快的想法，您可以在其中拥有多个版本的图像并在滚动时更改它们的 z-index 或可见性。基本上每个图像都会有不同的分辨率。如果您必须对许多图像执行此操作，则此解决方案不会像进行大量图像编辑那样有效，但您始终可以进行批量编辑。
让我看看如果我能想到更多的想法然后我会编辑。
不是以便携的方式。
这在 Flash 中可能是可行的。Firefox JS 扩展允许它以 JS 数组、Base64 字符串等形式读取图像。您可以尝试“1 DIV=1 像素”hack，但很难以任何合理的速度获得任何合理大小的图像。如果您感觉非常兴奋，您可以尝试使用以下数据动态创建 base64 编码的图像：URI... 很多方法，但没有一个好...