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

时间:2011-12-07 11:48:27

标签: javascript html5 image image-processing html5-canvas

我想用框模糊动画来模糊图像,最初想要的是具有巨大半径的正方形,其尺寸会逐渐缩小,最终形成背景图像。

我尝试了http://www.quasimondo.com/BoxBlurForCanvas/FastBlur2Demo.html,但它是循环方式,而我需要盒形模糊。

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

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

1 个答案:

答案 0 :(得分:0)

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

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

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