Can this pixelation effect be achieved using raphael.js?

Question

I would like to progressively pixelate an image on a webpage and animate the pixelation as a transition. The pixelation would begin by using small pixels and the pixels would gradually become larger. Finally, the pixelation would reverse and then reveal a second image.

I'm looking for an effect like the pixelate effect here - you need to select pixelate as the transition and then click the image.

Yes, I could use that library but I already have a raphael canvas and am interested to know whether (and how) this might be possible.

Answer 1

Raphael is not really made to work with raster graphics, it's a vector library. Implement it in canvas.

Answer 2

I think the best option is to use another library for pixelation (like the one you linked, if you don't mind the license). Raphael.js is not supporting this effects as it is a vector library. You can convert the Raphael.js SVG into a image and run the effects on it - see this.

Note: This is not direct solution to your problem but it presents an another alternative how to achieve pixelation effect (for other users looking for a solution).

There is a close-pixelate project. It is a script able to convert an image into a pixelated version using an HTML5 canvas element and is licensed under MIT license.

The GitHub project page is here.

Usage:

document.getElementById('portrait-image').closePixelate([
  { resolution : 24 },
  { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
]);

Answer 3

For Internet Explorer it's really very simple since pixelation effect is supported by default as an extended CSS property.

IE Only CSS properties for Pixelate Effect:

-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1)";
filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1);

For rest of the browsers, you can develop your own solution based on codes like the one below:

http://phrogz.net/tmp/canvas_image_zoom.html