基于HTML5 Canvas实现黑白滤镜

来源：互联网发布：搜狗拼音打字软件编辑：程序博客网时间：2024/05/08 13:32

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

0 1