JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

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);
}