256色转换灰阶的javaｓｃｒｉｐｔ实现

一个完整的画面是由红三通道，绿色和蓝色的，红色的三通道，绿色和蓝色都显示灰度，不同的灰度值来表示红、绿、蓝的比例图像。通道中的纯白色代表这里彩色光的亮度最高，且亮度水平为255。

灰度的方法：

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

2。整数方法：灰色=（r * 299 + G * 587 + B * 114 + 500） / 1000

3。转移方法：灰色=（r * 28 + G * 151 + B * 77）> 8；

4。平均值法：灰色=（R + G + B） 3；

5。只接受绿色：灰色= G；

只要RGB（R，G，b）中的原R，G，B替换为Gray，新的RGB（灰色，灰色，灰色）将是灰度的。

设计素描 uff1a
代码如下：

imgbase

尖叫{。
宽度：400px；
身高：300px；
位置：绝对；
上图：60px；
border: 1px solid；
}
#帆布{
位置：绝对；
上图：60px；
左：500px；
边境：1px破灭；
}


您的浏览器不支持画布！
功能convert256togray（）{
var c = document.getelementbyid（画布）；
VaR CTX = c.getcontext（2D）；
无功imgdata = ctx.getimagedata（0,0，c_w，c_h）；
对于（var i = 0；i < imgdata.data.length；我+ = 4）
{
VAR r = imgdata。数据{我}； / / R（0-255）
var g = imgdata。数据{我+ 1 }； / / G（0-255）
var b = imgdata。数据{我+ 2 }； / / G（0-255）
VaRα= imgdata。数据{我+ 3 }； / /α（0-255）
浮点数算法
var灰色= R * 0.299 + G * 0.587 + B * 0.114；
整数算术
灰色（r * 299 + G * 587 + b * 114 + 500） / 1000；
移位算法
灰色（r * 76 + G * 151 + B * 28）> > 8；
平均算法
灰色（R + G + B） / 3；
只有绿色
var；
ImgData.data{i} = gray;
imgdata。数据{我+ 1 } =灰色；
imgdata。数据{我+ 2 } =灰色；
imgdata。数据{我+ 3 } =α；
}
ctx.putimagedata（imgdata，0,0）；
}
画布图像的宽度
无功c_w = 400；var c_h = 300；
/ /加载img图像
功能loadimg（）{
VaR img = document.getelementbyid（尖叫）；
var文件= document.queryselector（输入{类型=文件}）。文件{ 0 }；
如果（！测试文件（文件类型））{
警报（）文件必须是图片！；
返回false；
}
VaR的读者= FileReader（）；
reader.addeventlistener（负荷
img.src = reader.result；
}，假）；
如果（文件）{
reader.readasdataurl（文件）；
LoadCanvas（）；
}
}
加载画布映像
功能loadcanvas（）{
var c = document.getelementbyid（画布）；
VaR CTX = c.getcontext（2D）；
VaR img = document.getelementbyid（尖叫）；
img.onload =函数（）{
Ctx.drawImage（IMG，0,0，c_w，c_h）；
}
}

以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！