前言

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

模糊化方法：

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

例：

1 2 3

4 5 6

7 8 9

比如这个像素点5,把5像素点和周围的8个像素点(1,2,3,4,6,7,8,9)的红蓝取出，取这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；

效果图：

实例代码

！DOCTYPE html html heartheta charset=' UTF-8 ' title img base/title style type=' text/CSS ' .尖叫{宽度：400像素高度：300 px绝对位置：top:60pxborder: 1px固体；} # canvas { position :绝对值；top :60 pxleft :500 pxborder : 1px虚线；}/style/head dyinput type=' file ' on change=' LoadIMg()'/input type=' button ' value='模糊化onclick=' Fuzzy()'/br/br/div class='尖叫img id='尖叫宽度=' 400像素'高度=' 300像素' alt='图像预览'./div canvas id=' canvas ' width=' 400 px；高度=' 300像素您的浏览器不支持画布！/canvascriptfunction Fuzzy(){ var c=document。getelementbyid(' canvas ')；var CTX=c . GetContext(' 2d ')；var imgData=ctx.getImageData(0，0，c.width，c . height)；var img _ w=img data . width var img _ h=img data . height for(var w=1；w(img _ w-1)；w){ for(var h=1；h(img _ h-1)；h ){ //起始点var I=(w img _ w * h)* 4；var R=IMgdata。数据[I-1604]IMgdata。数据[I-1600]IMgdata。数据[I-1596]IMgdata。数据[I-4]IMgdata。数据[I]IMgdata。数据[I-4]IMgdata。数据[I 1596]IMgdata。数据[I 1600]IMgdata。资料[I 1604]；//R(0-255)var G=img数据。数据[I-1603]img数据。数据[I-1599]img数据。数据[I-1595]img数据。数据[I-3]img数据。数据[I 1]img数据。数据[I 5]img数据。数据[I 1597]img数据。数据[I 1601]img数据。资料[I 1605]；//G(0-255)var B=img数据。数据[I-1602]img数据。数据[I-1598]img数据。数据[I-1594]img数据。数据[I-2]img数据。数据[I 2]img数据。数据[I 6]img数据。数据[I 1598]img数据。数据[I 1602]img数据。资料[I 1606]；//G(0-255)var Alpha=imgdata。数据[I ^ 3]；//Alpha(0-255)imgdata。数据[I]=R/9；img数据。数据[I 1]=G/9；img数据。数据[I ^ 2]=b/9；img数据。数据[I ^ 3]=；} } ctx.putImageData(imgData，0，0)；}/scriptscript//canvas图像的宽高var c _ w=400var c _ h=300/加载img图像函数loadImg(){ var img=document。getelementbyid('尖叫');var文件=文档。query selector(' input[type=file]').文件[0];if(！/image/w /.test(file.type)){ alert('文件必须为图片！');返回false } var reader=new FileReader()；reader.addEventListener('load '，function(){ img。src=阅读器。结果；}，false)；如果(文件){reader.readAsDataURL(文件);loadCanvas()；}}//加载帆布图像函数loadCanvas(){ var c=document。getelementbyid(' canvas ')；var CTX=c . GetContext(' 2d ')；var img=document.getElementById('尖叫');img。onload=function(){ CTX。绘制图像(img，0，0，c_w，c _ h)；} }/脚本/正文/html总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。