//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]
示例：过滤掉绿色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvasa" width="130" height="170" style=" border: 1px solid #c03;"></canvas>
<canvas id="canvasb" width="130" height="170" style=" border: 1px solid #06C1AE;"></canvas>
<p><a href="javascript:filter()">Filter</a></p>
<script>
var canvasa=document.getElementById('canvasa');
var contexta=canvasa.getContext('2d');
var cancvasb=document.getElementById('canvasb')
var contextb=canvasb.getContext('2d');
var image=new Image()
window.onload=function(){
image.src="../girl.png"
image.onload=function(){
contexta.drawImage(image,0,0,canvasa.width,canvasa.height)
}
}
function filter(){
var imageData=contexta.getImageData(0,0,canvasa.width,canvasb.height)
//对图片的像素进行操作 imageData.data data的属性中存储的就是图像的像素
var pixelData=imageData.data
for(var i=0;i<canvasb.width*canvasb.height;i++){
//把rgb变成黑色
//pixelData[4*i+0]=0 //r
pixelData[4*i+1]=0 //g
//pixelData[4*i+2]=0 //b
}
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height)
}
</script>
</body>
</html>