教你使用Canvas处理图片的方法

var handle = document.getElementById("handle");
var create = document.getElementById("create");
handle.onclick = function(){ // 单击“处理图片”按钮，处理图片
var imgData = context.getImageData(0,0,canvas.width,canvas.height); //获取图片数据对象
var data = imgData.data; //获取图片数据数组，该数组中每个像素用4个元素来保存，分别表示红、绿、蓝和透明度值
var average = 0;
for (var i = 0; i < data.length; i+=4) {
average = Math.floor((data[i]+data[i+1]+data[i+2])/3); //将红、绿、蓝色值求平均值后得到灰度值
data[i] = data[i+1] = data[i+2] = average; 将每个像素点的色值重写
}
imgData.data = data;
context.putImageData(imgData,0,0); //将处理后的图像数据重写至Canvas画布，此时画布中图像变为黑白色
};
create.onclick = function(){ // 单击“生成图片”按钮，导出图片
var imgSrc = canvas.toDataURL(); //获取图片的DataURL
var newImg = new Image();
var result = document.getElementById("result");
newImg.src = imgSrc; //将图片路径赋值给src
result.innerHTML = '';
result.appendChild(newImg);
};
};
};

可能上面代码写得不是很好，看起来也不是那么好理解，最好自己能够亲自写一写，这样对于自己理解会更加深刻一些。