如何在图像上实现 Box Blur 动画？ [像素化图像]

Question

我想用盒子模糊动画来模糊图像，最初想要一个半径很大的正方形，然后逐渐缩小，最后形成背景图像。

我尝试了http://www.quasimondo.com/BoxBlurForCanvas/FastBlur2Demo.html，但它以圆形方式完成，而我需要盒形模糊。

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

关于如何实现这一点的任何帮助？

Answer 1

当您对图像进行像素化时，您实际上是在降低分辨率（即使像素变大）。根据您的应用程序，您可以简单地降低图像分辨率，然后将图像拉伸到同一区域。

从模糊滤镜开始确实会产生更好的效果。没有它，下采样的图像会表现出各种锯齿效果。请记住，您的下采样算法可能会随着缩放而变得平滑。

主要技巧是确保在拉伸图像时不会对其进行平滑处理。