javascript - 动态像素化 html 图像元素

Question

我要在网页上拍摄图像，然后使用 javascript(或任何最适合的)对其进行动态“像素化”(例如变成 20 像素的正方形)。然后，当用户向下滚动页面时，我需要图像的分辨率逐渐增加，直到它不再像素化。

我有什么想法可以着手做这件事吗？我意识到我可以使用 php 调整图像大小并多次调整图像大小，但那需要加载几个额外的图像。另外，我知道我可能可以使用 flash 和 pixelbender 来实现这种效果，但如果可能的话，我想在 HTML5、CSS 和 Javascript 的限制范围内实现它。

感谢任何想法!

更新:类似这样的东西，但使用 Javascript 而不是 Flash？ http://www.reflektions.com/miniml/template_permalink.asp?id=390

Answer 1

您可以在隐藏的 <canvas> 中渲染图片元素。然后使用此处描述的技术的推导 http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation .在一秒钟内创建图像的像素化版本 <canvas>使用不断减少的元素 fillRect's .这样您甚至可以缓冲原始图像数据。

编辑:我会使用 2 <canvas>元素，以便您只需获取并绘制一次原始图像。也许你可以在相同的 <canvas> 中缓冲/缓存此图像元素，但通过将其绘制在视口(viewport)之外，我不确定这是否可行。