如何在图像上实现Box Blur动画？ [pixelate图片]

Question

我想用模糊模糊动画模糊图像，最初想要一个巨大的半径的平方，这将逐渐减少大小，最后形成一个背景图像。

我试过http://www.quasimondo.com/BoxBlurForCanvas/FastBlur2Demo.html，但它以圆形的方式做，而我需要盒子模糊。

我也试过http://desandro.com/resources/close-pixelate/，但它的速度非常慢，因为我使用的图像是1280px x 800px，并用作页面背景。

有关如何实现这一目标的任何帮助？

Answer 1

当您对图像进行像素化处理时，会降低分辨率（即使像素变大）。根据您的应用程序，您可能会简单地降低图像分辨率，然后在同一区域拉伸图像。

从模糊过滤器开始确实会产生更好的结果。没有它，下采样图像会呈现各种混叠效果。请记住，您的下采样算法可能随着其缩放而平滑。

主要技巧是确保当图像被拉伸时，它不被平滑。