如何在图像上实现框模糊动画?[使图像像素化]

How to implement Box Blur animation on an image? [pixelate an image]

本文关键字：图像像素动画模糊实现更新时间：2023-09-26

我想用框模糊动画模糊一个图像，最初想要一个大半径的正方形，它会逐渐变小，最后形成一个背景图像。

我尝试http://www.quasimondo.com/BoxBlurForCanvas/FastBlur2Demo.html，但它在圆形时尚，而我需要盒形模糊。

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

关于如何实现这一点有什么帮助吗?

当您对图像进行像素化时，您正在有效地降低分辨率(即使像素变大)。根据您的应用程序，您可以简单地降低图像分辨率，然后将图像拉伸到相同的区域。

从模糊滤镜开始确实产生了更好的结果。没有它，下采样图像会显示各种混叠效果。请记住，你的降采样算法可能会在缩放时变得平滑。

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