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