基于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<imageData.data.length-4; i=i+4){
        average=(imageData.data[i]+imageData.data[i+1]+imageData.data[i+2])/3;
        imageDataCopy.data[i]=average;
        imageDataCopy.data[i+1]=average;
        imageDataCopy.data[i+2]=average;
        imageDataCopy.data[i+3]=imageData.data[i+3];
    }
} 

function captureCanvasPixels(){        
    imageData=context.getImageData(0, 0, canvas.width, canvas.height);        
    copyCanvasPixels();
} 

function setWhiteBlackGlasses(){        
    captureCanvasPixels();        
    context.putImageData(imageDataCopy, 0, 0);
}