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 参考
