Can this pixelation effect be achieved with raphael.js?

Question

I would like to gradually pixelate the image on the web page and animate the pixelation as a transition. Pixelization will begin with the use of small pixels, and the pixels will gradually increase. Finally, the pixelation will change, and then the second image will open.

I am looking for an effect similar to the pixelate effect here - you need to select pixelate as a transition, and then click on the image.

Yes, I could use this library, but I already have a raphael canvas, and I am interested to know if (and how) it is possible.

Answer 1

I think the best option is to use another library for pixelation (for example, the one you linked if you are not against the license). Raphael.js does not support these effects, as it is a vector library. You can convert SVG Raphael.js to an image and run effects on it - see .

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

There is a close-pixelate project. It is a script that can convert an image to a pixel version using the HTML5 canvas element and is licensed under the MIT license.

GitHub project page here . Additional examples can be found here .

Application:

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

Answer 2

Rafael is not really designed to work with raster graphics, it is a vector library. Implement it in a canvas.

Answer 3

For Internet Explorer, this is very simple, since the pixelization effect is supported by default as an extended CSS property.

IE CSS Properties Only for Pixelate Effect:

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

For the rest of the browsers, you can develop your own solution based on codes similar to the ones below:

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