这个像素化效果可以用raphael.js实现吗

Question

我想逐渐对网页上的图像进行像素化，并将像素化设置为动画过渡。像素化将从使用小像素开始，然后像素会逐渐变大。最后，像素化会反转，然后显示第二张图像。

我正在寻找像像素化效果这样的效果这里 - 你需要选择像素化作为过渡，然后单击图像。

是的，我可以使用那个库，但我已经有一个 raphael canvas 并且很想知道这是否（以及如何）可能。

Answer 1

Raphael 并不是真正为处理光栅图形而设计的，它是一个矢量库。在画布中实现它。

Answer 2

我认为最好的选择是使用另一个库进行像素化（如果你不介意许可证的话，就像你链接的那个）。 Raphael.js 不支持这种效果，因为它是一个矢量库。您可以将 Raphael.js SVG 转换为图像并在其上运行效果 - 请参阅this.

注意： 这不是您问题的直接解决方案，但它提供了另一种实现像素化效果的替代方法（对于寻求解决方案的其他用户）。

有一个close-pixelate项目。它是一个脚本，能够使用 HTML5 canvas 元素将图像转换为像素化版本，并获得 MIT 许可。

GitHub 项目页面是在这里.

用法：

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

Answer 3

对于 Internet Explorer，它真的非常简单，因为默认情况下支持像素化效果作为扩展 CSS 属性。

像素化效果的 IE 唯一 CSS 属性：

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

对于其他浏览器，您可以根据以下代码开发自己的解决方案：

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