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