一、putimagedata的概述
var imageData = ctx.getImageData(x,y,width,height); //获取到imageData对象 var data = imageData.data; //data数组中保存了图像中每个像素的信息,每个像素包含四个值(r,g,b,a) data[index+0] = r; data[index+1] = g; data[index+2] = b; data[index+3] = a; ctx.putImageData(imageData,x,y); //将修改后的imageData数据放回画布中
在Canvas中,我们可以通过getImageData()方法获取画布指定区域的像素信息,然后修改其像素点的颜色信息,再通过putImageData()方法将修改后的数据渲染到画布上。putImageData()方法主要是将getImageData()返回的ImageData对象放回canvas中,因此,要想了解putImageData()方法,我们首先需了解getImageData()方法。
二、getImageData()的使用
var imageData = ctx.getImageData(x,y,width,height); var data = imageData.data;
getImageData()方法会返回ImageData对象,该对象包含一个表示指定矩形内每个像素数据的数组(data),具体参数如下:
- x:表示要复制的矩形数据的左上角 x 坐标(相对于当前变换矩阵,而非画面表示)
- y:表示要复制的矩形数据的左上角 y 坐标(相对于当前变换矩阵,而非画面表示)
- width:矩形数据的宽度
- height:矩形数据的高度
返回值是一个ImageData对象,其中包含了以该坐标点为左上顶点、宽和高分别为width和height的矩形范围内每个像素的rgba四个通道信息,每个通道位于数组data中的连续四个元素中,各通道位深都为8位。由此,我们可以通过修改ImageData对象中的像素信息,从而达到修改canvas中图像的目的。
三、putImageData()的使用
ctx.putImageData(imageData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
putImageData()方法将图像数据放回画布上,并可指定放回的位置和区域范围,具体参数如下:
- imageData:要返回画布中的ImageData对象
- x:在画布上放置图像的左上角 x 坐标
- y:在画布上放置图像的左上角 y 坐标
- dirtyX:起始像素点的x坐标,默认为0
- dirtyY:起始像素点的y坐标,默认为0
- dirtyWidth:在x方向上绘制的像素点个数,默认为ImageData对象的宽度
- dirtyHeight:在y方向上绘制的像素点个数,默认为ImageData对象的高度
需要注意的是,如果dirtyWidth和dirtyHeight未指定,那么将使用imageData对象的width和height属性。
四、putImageData()与getImageData()的结合使用
var imageData = ctx.getImageData(x,y,width,height); var data = imageData.data; for (var i = 0; i < data.length; i+=4) { var r = data[i+0]; var g = data[i+1]; var b = data[i+2]; var a = data[i+3]; // 修改像素点信息 data[i+0] = r + 10; // r值+10 data[i+1] = g - 20; // g值-20 data[i+2] = b * 1.5; // b值*1.5 data[i+3] = a * 0.5; // a值*0.5 } ctx.putImageData(imageData, x, y);
上述代码中,将获取的imageData对象中的每一个像素rgb值进行了修改,并将修改后的结果通过putImageData()方法重新渲染到画布上。
五、总结
putImageData()与getImageData()是Canvas最常用的两个API,它们可以用来实现复杂效果的图形生成,如拾色器、特效等。虽然这两个方法的使用比较灵活,但我们必须了解它们的基本使用方法,才能更好地使用Canvas进行开发。
原创文章,作者:小蓝,如若转载,请注明出处:https://www.506064.com/n/285832.html