4

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

Chris Armstrong
  • 3,585
  • 12
  • 42
  • 47
  • html5 isn't even out yet – knittl Mar 18 '10 at 15:53
  • it isn't finalised, but lot of it is usable in modern (not IE) browsers – Chris Armstrong Mar 18 '10 at 16:00
  • 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 Jul 20 '12 at 19:16
  • @Simon the best example I've seen is http://close-pixelate.desandro.com/ , not sure if it works with video or not – Chris Armstrong Sep 24 '12 at 23:06
  • @Chris That is pretty neat, thanks! I ended up being able to do this on my own, but I'm sure it's not the most optimal way. – NotSimon Sep 25 '12 at 00:17
  • The best solution i've found so far is to use this: http://www.netzgesta.de/transm/ –  Apr 24 '10 at 17:40

4 Answers4

4

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.

Martijn Laarman
  • 13,476
  • 44
  • 63
  • That sounds promising. Could you elaborate on why I need to use two canvas elements though? – Chris Armstrong Mar 18 '10 at 16:10
  • Ah right that makes sense... I think this is probably the way to go. Do you know of any tutorials that would walk me through doing something like this? I get the basic principle, but have never tried implementing something like this. – Chris Armstrong Mar 18 '10 at 16:15
  • 1
    I think with the first page showing how to get and draw an image and then loop over it to get colour information at a certain x,y and the second do drawrect should get you started :). I'm no `` expert and would probably use both to get me started too :). – Martijn Laarman Mar 18 '10 at 16:25
1

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

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

Community
  • 1
  • 1
powtac
  • 40,542
  • 28
  • 115
  • 170
1

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.

Jonathan Czitkovics
  • 1,642
  • 11
  • 11
  • Yeah I had considered multiple images, but I would like the image to be fullscreen, so loading in multiple large images would be a bit of a bandwidth hog – Chris Armstrong Mar 18 '10 at 16:13
0

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...

SF.
  • 13,549
  • 14
  • 71
  • 107