可这像素化效果使用raphael.js实现？ [英] Can this pixelation effect be achieved using raphael.js?

问题描述

我想在网页上逐步像素化图像和动画的像素化作为过渡。所述像素化将开始用小的像素与将逐渐变大。最后，像素化会扭转，然后露出了第二个图像。

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.

推荐答案

我认为最好的办法是使用另一个库像素化（像你链接的一个，如果你不介意的许可证）。因为它是一个矢量库Raphael.js是不支持这个作用。您可以将Raphael.js SVG转换成图像，并在其上​​运行的影响 - 见 <一个href=\"http://stackoverflow.com/questions/4086703/convert-raphael-svg-to-image-png-etc-client-side/4093951#4093951\">this.

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.

的注：的这不是直接解决您的问题，但它presents另外一种选择如何实现像素化效果（对其他用户寻找一个解决方案）

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

有一个 特写像素化 项目。这是一个脚本能够将图像转换为使用HTML5画布元素的像素化版本，并在MIT许可授权。

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.

GitHub的项目页面 这里 。额外的例子可以发现， 这里

The GitHub project page is here. Extra examples can be found here.

用法：

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

这篇关于可这像素化效果使用raphael.js实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！