浅谈JavaScript和Canvas实现彩色图片转换成黑白图片

1、convertToGray()

在主体代码中使用 canvas 元素的id来获取画布，并设置画布的宽和高为图片的宽和高，再将上下文初始化为2d画布；彩色图片加载完成后，使用 drawImage() 将图片加载到上下文，调用用于完成剩余绘制工作的 getColorData()和 putColorData()；最后为myImage指定彩色图片的路径。

2、getColorData()

使用 getImageData()将图像复制到 myImage，然后按照以下方式处理图像：在图像数据数组中移动，并收集前三个字节（红色、绿色和蓝色，忽略 alpha）的值；然后，该图像将三个字节的值相加，并将总和除以3，计算结果将舍入为一个整数，并被写入到这三个字节的值中。此值对应于颜色的色调，但灰度值从0到255，得到外观与原始彩色图片相同的黑白图片。

 

3、putColorData()

putImageData() 将已更改的图像数据写回到画布，通常用于让另一个图片执行实际处理，并仅在处理完成时显示结果。

var canvas, ctx, myImage;  function convertToGray() {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";}}function getColorData() {var length = canvas.width * canvas.height;myImage = ctx.getImageData(0, 0, canvas.width, canvas.height);for (var i = 0; i < length * 4; i += 4) {var myRed = myImage.data[i];var myGreen = myImage.data[i + 1];var myBlue = myImage.data[i + 2];myGray = parseInt((myRed + myGreen + myBlue) / 3);myImage.data[i] = myGray;myImage.data[i + 1] = myGray;myImage.data[i + 2] = myGray;}}      function putColorData() {ctx.putImageData(myImage, 0, 0);}