Dynamically pixelate html image element

Question

I have to take an image on a web page and then use javascript (or something that works best) to dynamically "simulate" it (for example, in 20 pixel squares). Then, when the user scrolls down the page, I need the image to gradually increase in resolution, until it ceases to be a pixel.

Any ideas how I could do this? I understand that I can use php to resize the image several times and just turn off the image, but this will require downloading a few additional images. In addition, I know that I could possibly make an effect with flash and pixelbender, but I want to achieve this within the limits of HTML5, CSS and 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

Answer 1

You can make the image in a hidden <canvas> . Then use the output of the method described here http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation . To create a pixel version of the image in the second <canvas> element using all decreasing fillRect's . This way you even buffer the original image data.

edit: I would use 2 <canvas> elements, so you only need to extract and draw the original image once. Perhaps you could buffer / cache this image in the same <canvas> , but, drawing it outside the viewport, I'm not sure if this is possible.

Answer 2

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 will give you the lower resolution you are looking for.

Then you can find a way to change the resolution to the result or capture the color of each pixel in the position (height and width) / 2 squares you are looking for. Then generate them into div tags or a table with the appropriate color and size, resulting in an image yourself.

I have probably a faster idea where you can have multiple versions of the image and change your z-index or their visibility when scrolling. Basically, each image will have different resolutions. If you need to do this with many images, then this solution will not be as effective as a lot of image editing, but you can always do batch editing.

Let me see, if I can come up with more ideas, then I will edit.

Answer 3

Take a look at http://close-pixelate.desandro.com/

Explanation here: fooobar.com/questions/1304472 / ...

Answer 4

Not in portable mode.

This can be done in Flash. Firefox JS extensions allow you to read images as JS arrays, Base64 strings, etc. You can experiment with “1 DIV = 1 pixel,” but it’s hard to get any reasonable image size at any reasonable speed. If you feel really hyper, you can try to create base64 encoded images on the fly using data: URI ... many ways, but nothing good ...