动态像素化html图像元素 [英] Dynamically pixelate an html image element

问题描述

我要在网页上拍摄图片，然后使用javascript（或其他最适合的图片）动态像素化（例如，转换为20像素的正方形）。然后，当用户向下滚动页面时，我需要图像逐渐增加分辨率，直到它不再像素化。

任何想法我怎么可以这样做？我意识到我可以使用PHP调整图像和几次，只是切换图像，但这将需要加载几个额外的图像。另外，我知道我可以做的效果与闪光灯& pixelbender，但我想实现它的限制，HTML5，CSS&如果可能的话。

欣赏任何想法！

更新：这样的东西， ？ http://www.reflektions.com/miniml/template_permalink.asp?id= 390

解决方案

您可以将图片隐藏在< canvas& code>元素。然后使用此处描述的技术的推导 http： //dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation 。要使用不断减少的< canvas> 元素中创建像素化版本的图片-tutorial / 2_1_canvas_rect.htmlrel =nofollow noreferrer> fillRect's 。

编辑：我会使用2 < canvas> 元素，这样您只需要提取和绘制一次原始图像。也许你可以缓冲/缓存这个图像在同一个< canvas> 元素，但通过绘制它在视图端口，我不知道这是否可能，虽然。 p>

I'm to take an image on a webpage, and then use javascript (or whatever would be best suited) to dynamically 'pixelate' it (e.g. into 20px squares). Then, as the user scrolls down the page, I need the image to gradually increase in resolution, till it is no longer pixelated.

Any ideas how I could go about doing this? I realise I could use php to resize an image and several times and just switch out the image, but that would require loading several extra images. Also, I know I could probably do the effect with flash & pixelbender, but I want to achieve it within the limitations of HTML5, CSS & Javascript if possible.

Appreciate any thoughts!

Update: Something like this, but with Javascript instead of Flash? http://www.reflektions.com/miniml/template_permalink.asp?id=390

解决方案

You could render the picture in a hidden <canvas> element. Then use a derivation of the technique described here http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation . To create a pixelated version of the image in a second <canvas> element using ever decreasing fillRect's. This way you even buffer the orginal image data.

edit: I would use 2 <canvas> elements so that you only have to fetch and draw the original image once. Perhaps you could buffer/cache this image in the same <canvas> element but by drawing it outside of the view port i am not sure if this is possible though.

这篇关于动态像素化html图像元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！