canvas图像滤镜---canvas getImageData() 方法

定义和用法

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：R - 红色 (0-255)G - 绿色 (0-255)B - 蓝色 (0-255)A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

JavaScript 语法

var imgData=context.getImageData(x,y,width,height);

参数值

参数	描述
x	开始复制的左上角位置的 x 坐标。
y	开始复制的左上角位置的 y 坐标。
width	将要复制的矩形区域的宽度。
height	将要复制的矩形区域的高度。

-------------------------------------------------------------------------------------------------------------------------------------------------先绘制一个canvas并放置一张图片

<canvas id="shade" width="800" height="400px" style="border: solid 1px red;position: absolute;left: 0px;top: 0px"></canvas>
<script>
var shade=document.getElementById('shade');
var imgContext=shade.getContext("2d");
var img=new Image();
img.src='canTT.jpg';
img.onload=function(){
imgContext.drawImage(img,0,0);
}
</script>

然后使用getImageDate()方法获取图片上某个区域，并复制到画面上。

var shade=document.getElementById('shade');var imgContext=shade.getContext("2d");var img=new Image();img.src='canTT.jpg';img.onload=function(){imgContext.drawImage(img,0,0);var imgData=imgContext.getImageData(50,50,200,200);imgContext.putImageData(imgData,200,200)}

----------------------------------------------------------------------------------------------------------------------滤镜1---官方例子反转颜色  当前颜色R、G、B，反色：（255-R）、（255-G）、（255-B）

<script>var shade=document.getElementById('shade');var imgContext=shade.getContext("2d");var img=new Image();img.src='canTT.jpg';img.onload=function(){imgContext.drawImage(img,0,0);var imgData=imgContext.getImageData(100,100,350,250);var r, g,b;for(var i=0;i<imgData.data.length;i+=4){r=imgData.data[i];g=imgData.data[i+1];b=imgData.data[i+2];imgData.data[i]=255-r;imgData.data[i+1]=255-g;imgData.data[i+2]=255-b;imgData.data[i+3]=255;}imgContext.putImageData(imgData,100,100)}</script>

滤镜二---灰色    当前颜色R、G、B，灰色：  newr = (r * 0.272) + (g * 0.534) + (b * 0.131);  newg = (r * 0.349) + (g * 0.686) + (b * 0.168);  newb = (r * 0.393) + (g * 0.769) + (b * 0.189);

var shade=document.getElementById('shade');var imgContext=shade.getContext("2d");var img=new Image();img.src='canTT.jpg';img.onload=function(){imgContext.drawImage(img,0,0);var imgData=imgContext.getImageData(100,100,350,250);var r, g,b;for(var i=0;i<imgData.data.length;i+=4){r=imgData.data[i];g=imgData.data[i+1];b=imgData.data[i+2];imgData.data[i]=r*0.272 + g* 0.534+b* 0.131;imgData.data[i+1]=r*0.349+ g* 0.686 +b*0.168;imgData.data[i+2]=r* 0.393 +g *0.769 +b*0.189;imgData.data[i+3]=255;}imgContext.putImageData(imgData,100,100)}