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

我有什么想法可以做到这一点？我意识到我可以使用php来调整图像大小几次并且只是切换出图像,但这需要加载几个额外的图像.另外,我知道我可以用flash& amp; 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>中创建图像的像素化版本元素使用率不断下降fillRect's.这样你甚至可以缓冲原始图像数据.

编辑：我会使用2< canvas>元素,这样您只需要获取并绘制一次原始图像.也许您可以在同一< canvas>中缓冲/缓存此图像.元素,但通过在视图端口之外绘制我不知道这是否可行.