<强>前言
众所周知一幅完整的图像,是由红色,绿色,蓝色三个通道组成的。红色,绿色,蓝色三个通道的缩览图都是以灰度显示的。用不同的灰度色阶来表示“红、绿、蓝”在图像中的比重。通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是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;
<>强效果图:
<>强实例代码
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> ImgBase
& lt;风格类型=" text/css "比;
.scream {
宽度:400 px;
身高:300 px;
位置:绝对的;
上图:60 px;
边界:1 px固体;
}
#帆布{
位置:绝对的;
上图:60 px;
左:500 px;
边界:1 px破灭;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;输入类型=拔募?比;
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/模糊化”/比;
& lt; br/祝辞& lt; br/比;
& lt; div类=凹饨小北?
& lt; img id=凹饨小笨矶?" 400 px高度=?00 px”alt=巴枷裨だ馈痹?
& lt;/div>
& lt;帆布id=盎肌笨矶?400 px;“高度=300 px;“比;
您的浏览器不支持画布!
& lt;/canvas>
& lt; script>
函数模糊(){
var c=. getelementbyid(“画布”);
var ctx=c.getContext (2 d);
var imgData=https://www.yisu.com/zixun/ctx.getImageData (0, 0, c.width c.height);
var img_w=imgData.width;
var img_h=imgData.height;
(var w=1; w <(img_w-1); w + +) {
(var h=1; h <(img_h-1); h + +) {//起始点
var i=(w + img_w * h) * 4;
var R=imgData.data (i - 1604) + imgData.data (i - 1600) + imgData.data (i - 1596) + imgData.data[我]+ imgData.data[我]
+ imgData.data[我+ 4)+ imgData.data[我+ 1596]+ imgData.data[我+ 1600]+ imgData.data[我+ 1604);//R (0 - 255)
var G=imgData.data (i - 1603) + imgData.data (i - 1599) + imgData.data (i - 1595) + imgData.data[我]+ imgData.data (i + 1)
+ imgData.data[我+ 5)+ imgData.data[我+ 1597]+ imgData.data[我+ 1601]+ imgData.data[我+ 1605);//G (0 - 255)
var B=imgData.data (i - 1602) + imgData.data (i - 1598) + imgData.data (i - 1594) + imgData.data[我2]+ imgData.data (+ 2)
+ imgData.data (+ 6) + imgData.data[我+ 1598]+ imgData.data[我+ 1602]+ imgData.data[我+ 1606];;//G (0 - 255)
varα=imgData.data [i + 3];//α(0 - 255)
imgData。数据[我]=R/9;
imgData。数据(i + 1)=G/9;
imgData。数据(i + 2]=B/9;
imgData。数据(+ 3)=α;
}
}
ctx.putImageData (imgData, 0, 0);
}> 脚本//帆布图像的宽高
var c_w=400;var c_h=300;//加载img图像
函数loadImg () {
var img=. getelementbyid(“尖叫”);
var文件=document.querySelector(输入[类型=文件]).files [0];
如果(!/图像\/\ w +/test (file.type)) {
alert("文件必须为图片!”);
返回错误;
}
var=new FileReader读者();
读者。addEventListener(“负载”,函数(){
img。src=https://www.yisu.com/zixun/reader.result;
},假);
如果(文件){
reader.readAsDataURL(文件);
loadCanvas ();
}
}//加载帆布图像
函数loadCanvas () {
var c=. getelementbyid(“画布”);
var ctx=c.getContext (2 d);
var img=. getelementbyid(“尖叫”);
img。onload=function () {
ctx.drawImage (img, 0, 0 c_w c_h);
}
}
& lt;/script>
& lt;/body>
& lt;/html>
<强>总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
