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]

示例:过滤掉绿色


<!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>



阅读更多
上一篇canvas--putImageData--(灰色滤镜、黑白滤镜、反色滤镜、模糊滤镜、马赛克滤镜)
下一篇canvas--放大镜效果
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭