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