canvas--getImageData/putImageData

//imageData=context.getImageData(x,y,w,h)   imageData对象width height data
//将已知的imageData放置到画布中 context.putImageData(imageData,dx,dy,dirtyX,dirty,dirtyW,dirtyH)
//对象素的处理过程：首先拿到imageData拿到相关信息进行修改 然后再用putImageData 放回到画布中


//context.putImageData(imageData,dx,dy,dirtyX,dirty,dirtyW,dirtyH)
//把imageData放置在画布的dx,dy位移中  
//dirtyX,dirty,dirtyW,dirtyH    被修改的数据  在原始的画布中规定的区间（区域） 那么距离左边及上端 的距离分辨是 dx+dirtyX  dy+dirty
//imageData.data data是将所有的像素首先转为一维数组
//[ 0 , 1 , 2 , 3 ,    4 , 5 , 6 , 7 ,.....]
//0,1,2,3第一个像素的rgba  4,5,6,7第二个像素的rgba
//第i个像素                                         第x行第y列的像素
//                        i=x*width+y
//r-pixelData[4*i+0]      r-pixelData[4*i+0]
//g-pixelData[4*i+1]      g-pixelData[4*i+1]
//b-pixelData[4*i+2]      b-pixelData[4*i+2]

//a-pixelData[4*i+3]      a-pixelData[4*i+3]

示例：过滤掉绿色

Filter