Dynamically pixelate an html image element
canvas, html, javascript, pixel
Solution
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.
Problem
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