Canvas getImageData() 方法
示例
复制画布上指定矩形的像素数据,然后将图像数据重新放回画布上
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
const imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}
自己动手试一试 »
更多示例见下文。
描述
getImageData()
方法返回一个 ImageData 对象,该对象复制画布上指定矩形的像素数据。
注意: ImageData 对象不是图片,它指定了画布上的一个部分(矩形),并保存了该矩形内每个像素的信息。
ImageData 对象中的每个像素有四条信息,即 RGBA 值
R - 红色(0-255)
G - 绿色(0-255)
B - 蓝色(0-255)
A - Alpha 通道(0-255;0 表示透明,255 表示完全可见)
颜色/透明度信息保存在一个数组中,并存储在 ImageData 对象的 data 属性中。
提示: 在您修改了数组中的颜色/透明度信息后,可以使用 putImageData() 方法将图像数据重新复制回画布上。
示例
获取返回的 ImageData 对象中第一个像素的颜色/透明度信息的代码:
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
提示: 您还可以使用 getImageData() 方法来反转画布上图像的每个像素的颜色。
遍历所有像素并使用以下公式更改颜色值:
red = 255-old_red;
green = 255-old_green;
blue = 255-old_blue;
请参见下面的“自己尝试”示例!
语法
context.getImageData(x, y, width, height) |
参数值
参数 | 描述 |
---|---|
x | 要复制的左上角的 x 坐标(以像素为单位) |
y | 要复制的左上角的 y 坐标(以像素为单位) |
width | 要复制的矩形区域的宽度 |
height | 要复制的矩形区域的高度 |
返回值
图像数据对象 |
更多示例
要使用的图像
示例
使用 getImageData() 反转画布上图像中每个像素的颜色
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
const imgData = ctx.getImageData(0, 0, c.width, c.height);
// 反转颜色
for (let i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255-imgData.data[i];
imgData.data[i+1] = 255-imgData.data[i+1];
imgData.data[i+2] = 255-imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);
自己动手试一试 »
浏览器支持
<canvas>
元素是 HTML5 标准(2014)。
getImageData()
支持所有现代浏览器。
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考