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);
}
自己尝试 »
更多示例见下文。
描述
The getImageData() 方法返回一个 ImageData 对象，该对象复制画布上指定矩形的像素数据。
注意: ImageData 对象不是图片，它指定了画布上的一个部分（矩形），并保存了该矩形内每个像素的信息。
对于 ImageData 对象中的每个像素，都有四部分信息，即 RGBA 值
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - Alpha 通道 (0-255; 0 为透明，255 为完全可见)
颜色/alpha 信息保存在一个数组中，并存储在 ImageData 对象的 data 属性中。
提示: 在您操作完数组中的颜色/alpha 信息后，可以使用 putImageData() 方法将图像数据复制回画布。
示例
获取返回的 ImageData 对象中第一个像素的颜色/alpha 信息的代码
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 | 要复制的矩形区域的高度 |
返回值
| Image Data 对象 |
更多示例
要使用的图像
示例
使用 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);
自己尝试 »
浏览器支持
The <canvas> 元素是 HTML5 标准 (2014)。
getImageData() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考资料
