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? .asp?id=390

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./miniml/template_permalink.asp?id=390

• javascript
• html
• canvas
• pixel

• html5 isn't even out yet – knittl Commented Mar 18, 2010 at 15:53
• it isn't finalised, but lot of it is usable in modern (not IE) browsers – Chris Armstrong Commented Mar 18, 2010 at 16:00
• The best solution i've found so far is to use this: netzgesta.de/transm – user325024 Commented Apr 24, 2010 at 17:40
• Hey, did you ever find a proper way of doing this? I am sure that by now HTML 5 is supported enough to do this properly. I'm doing something similar but with a video, and I'm not sure fillRects are the best option. – NotSimon Commented Jul 20, 2012 at 19:16
• @Simon the best example I've seen is close-pixelate.desandro. , not sure if it works with video or not – Chris Armstrong Commented Sep 24, 2012 at 23:06

4 Answers 4

You could render the picture in a hidden <canvas> element. Then use a derivation of the technique described here http://dev.opera./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.

I would use a calculation where you get the width in pixels divided by the square width and then the height divided by the square height. This would give you the lower resolution your looking for.

Then you can find a way to change the resolution to the result or grab the color of every pixel at position (height and width)/2 of the square your looking for. Then generate them into div tags or table with the appropriate color and size eventually resulting in the image its self.

I have a probably faster idea where you can have multiple versions of the image and change their z-index or their visibility as you scroll. Basically each image would have the different resolutions. If you have to do that to many images then this solution wont be as efficient as there would be lots of image editing but you can always do a batch edit.

Let me see If I can think of more ideas then I will edit.

Have a look at http://close-pixelate.desandro./

Explanation here: https://stackoverflow./a/8372981/22470

Not in a portable way.

That might be doable in Flash. Firefox JS extensions allow it to read images as JS arrays, Base64 strings etc. You might experiment with "1 DIV=1 pixel" hack, but it's hard to get any reasonable size of the image at any reasonable speed. If you feel really hyper, you could try creating base64-encoded images on the fly using the data: URI... many ways but none good...