基于HTML5 Canvas实现黑白滤镜

getImageData 和 putImageData 是 HTML5  Canvas两个比较常用的两个 API。

通过getImageData，可以得到canvas指定区域的像素点数组，每个像素点包含4个字符，分别代表了R、G、B、A这四个分量。修改RGB分量的设置，通过putImageData将修改后的像素点数组写回到canvas中，即可实现各种滤镜效果。

将R、G、B三个分量取平均值，在用这个平均值分别设置R、G、B分量，即可实现黑白滤镜，实现的主要源码如下：

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var imageData;
var imageDataCopy=context.createImageData(canvas.width, canvas.height); 

function copyCanvasPixels(){     
    for(var i=0; i