JavaScript实现图像模糊化的方法实例

前端之家收集整理的这篇文章主要介绍了JavaScript实现图像模糊化的方法实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

众所周知一幅完整的图像,是由红色、绿色、蓝色三个通道组成的。红色、绿色、蓝色三个通道的缩览图都是以灰度显示的。用不同的灰度色阶来表示" 红,绿,蓝"在图像中的比重。通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255。

模糊化方法

就是将一个像素点的R(G,B)和它周围像素点的R(G,B)取出,然后取平均值再赋给这个像素点的R(G,B);这样就完成模糊化了;

例:

1 2 3

4 5 6

7 8 9

比如这个像素点5,把5像素点和周围的8个像素点(1,2,3,4,6,7,8,9)的R(G,B)取出,取这9个点的平均值然后赋给5像素点

R(5) = (R1+R2+R3+R4+R5+R6+R7+R8+R9)/9;

G(5) = (G1+G2+G3+G4+G5+G6+G7+G8+G9)/9;

B(5) = (B1+B2+B3+B4+B5+B6+B7+B8+B9)/9;

效果图:

实例代码

<Meta charset="UTF-8"> ImgBase