jquery morphing image effect

Question

I'm pretty sure this is impossible, but. . .

I am trying to get a morphing effect (like on this page in the flash image rotator -> http://www.sikids.com) in jquery. Or at least an effect that is very similar. I saw that jquery UI had some morphing effects, but I haven't been able to find it. This is important to our client, so any effect that is as close as possible would be awesome.

Answer 1

Another option that might be equally as slow, but would not require any canvases would be to write the pixelation algorithm using 1x1 pixel images.

The first step would be to reduce the image to a palette of 32 colors.

Then you would map the image to the palette at the start pixelation level. For example, if the image was 100px by 200px and the first level pixelation is a grid 50 by 100, replace the image with, 50x100 = 5000, <IMG> each with a background image from the color palette.

This would need to be done server side and passed as a javascript array that would then be converted to <IMG>:

image1 = [3, 4, 1, 2, ...];

Would become:

<div id="image1Pixelation">
  <img src="image1_3.png" width="2px" height="2px"/>
  <img src="image1_4.png" width="2px" height="2px"/>
  <img src="image1_1.png" width="2px" height="2px"/>
  <img src="image1_2.png" width="2px" height="2px"/>
  ...
</div>

Then in javascript enlarge some of the <IMG>, and reduce the grid by removing some of the <IMG>, until some stopping magnification is reached.

Then replace that with the new image on high magnification and reverse the algorithm for the new image.