JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法。分享给大家供大家参考，具体如下：
1、convertToGray()
在主体代码中使用canvas元素的id来获取画布，并设置画布的宽和高为图片的宽和高，再将上下文初始化为2d画布；彩色图片加载完成后，使用drawImage()将图片加载到上下文，调用用于完成剩余绘制工作的getColorData()和putColorData()；最后为myImage指定彩色图片的路径。
2、getColorData()
使用getImageData()将图像复制到myImage，然后按照以下方式处理图像：在图像数据数组中移动，并收集前三个字节（红色、绿色和蓝色，忽略alpha）的值；然后，该图像将三个字节的值相加，并将总和除以3，计算结果将舍入为一个整数，并被写入到这三个字节的值中。此值对应于颜色的色调，但灰度值从0到255，得到外观与原始彩色图片相同的黑白图片。
3、putColorData()
putImageData()将已更改的图像数据写回到画布，通常用于让另一个图片执行实际处理，并仅在处理完成时显示结果。
varcanvas,ctx,myImage;
functionconvertToGray(){
myImage=document.getElementById("img");
canvas=document.getElementById("myCanvas");
canvas.width=img.width;
canvas.height=img.height;
if(canvas.getContext){
ctx=canvas.getContext("2d");
myImage.onload=function(){
ctx.drawImage(myImage,0,0);
getColorData();
putColorData();
}
myImage.src="images/img8.jpg";
}
}
functiongetColorData(){
varlength=canvas.width*canvas.height;
myImage=ctx.getImageData(0,0,canvas.width,canvas.height);
for(vari=0;i
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。