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

灰度化方法：

1.浮点算法：灰色=R*0.299 G*0.587 B*0.114

2.整数方法：灰色=(R*299 G*587 B*114 500)/1000

3.移位方法：灰度=(R * 28G * 151 B * 77)8；

4.平均值法：Gray=(R G B)/3；

5.仅取绿色：灰色=G；

只要将原来的红绿蓝中的红、绿、蓝统一用灰色的替换，形成新的RGB(灰色、灰色、灰色)就完成灰度化了；

效果图：

代码如下：

！DOCTYPE html html head meta 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虚线；}/样式/头体输入类型=' file ' on change=' LoadIMg()'/input type=' button ' value='灰度化onclick=' convert 256 torgray()'/br/br/div class='尖叫img id='尖叫宽度=' 400像素'高度=' 300像素' alt='图像预览./div canvas id=' canvas ' width=' 400 px；'高度=' 300px '您的浏览器不支持画布！/canvas脚本函数convert 256 torgray(){ var c=document。getelementbyid(' canvas ')；var CTX=c . GetContext(' 2d ')；var imgData=ctx.getImageData(0，0，c_w，c _ h)；for(var I=0；iimgdata。数据。长度；I=4){ var R=IMgdata。数据[I]；//R(0-255)var G=imgdata。数据[I ^ 1]；//G(0-255)var B=imgdata。数据[I ^ 2]；//G(0-255)var Alpha=imgdata。数据[I ^ 3]；//Alpha(0-255) //浮点算法var gray=R * 0.299G * 0.587 B * 0.114//整数算法//var gray=(R * 299g * 587 B * 114 500)/1000；//移位算法//var gray=(R * 76G * 151 B * 28)8；//平均值算法//var gray=(R G B)/3；//仅取绿色//var gray=G；imgdata。数据[I]=灰色；imgdata。数据[I 1]=灰色；imgdata。数据[I ^ 2]=灰色；img数据。数据[I ^ 3]=；} ctx.putImageData(imgData，0，0)；}/脚本！-基础-脚本//画布图像的宽高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以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！