html像素处理,HTML canvas 像素处理 getImageData

HTML canvas 像素处理 getImageData

新的自己个人学习 0 评论 17 阅读 21 天前举报

在 canvas API 的图像处理技术中, 还有一个像素处理技术. 使用 canvas API 能够获取图形中的每个像素, 然后得到改像素颜色的 rgb 值或 rgba 值. 可以使用图形上下文对象的 getImageData 方法来获取图像中的像素. var imagedata=context.getImageData(sx,sym,sw,sh)

该方法使用 4 个参数, sx,sy 分别表示所获取区域的起点横坐标与纵坐标, sw,sh 分别表示所获取区域的宽度和高度.

imagedata 变量是一个 CanvasPixelArray 对象, 具有 height,width,data 等属性是一个保存像素的数组.

取得像素后, 可以对这些像素进行处理. 比如蒙版处理面部识别等复杂的图像处理操作.

使用 putImageData 方法进行操作, 将图像进行反显示操作.

context.putImageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

其中的 imagedata 为前面的像素数组, dx,dy 分别表示重绘图像的起点横纵坐标. dirtyX,dirtyY,dirtyWidth,dirtyHeight 为可选参数, 给出了一个矩形的起点的横纵坐标, 宽度, 高度. 这四个参数只绘制图像数组中这个矩形范围内的图像.

没懂

像素处理

varcanvas=document.getElementById("canvas");

varcontext=canvas.getContext("2d");

// 绘制图像

varimage=newImage();

image.src="http://p0.so.qhmsg.com/t0143f34941cb1804ff.jpg";

image.οnlοad=function(){

// 原图像是 300*300

context.drawImage(image,100,100,400,400);

varimagedata=context.getImageData(0,0,image.width,image.height);

for(vari=0,n=imagedata.data.length;i

imagedata.data[i+0]=255-imagedata.data[i+0];

imagedata.data[i+1]=255-imagedata.data[i+2];

imagedata.data[i+2]=255-imagedata.data[i+1];

}

context.putImageData(imagedata,0,0);

}

来源: http://www.qdfuns.com/note/49226/f0ee2b1d0beae79637b1c248b444d8f9.html