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