CanvasRenderingContext2D: getImageData() 方法

基线 广泛可用

此功能已建立完善，可在许多设备和浏览器版本上运行。它从 2015 年 7 月.

报告反馈

Canvas 2D API 的 CanvasRenderingContext2D 方法 getImageData() 返回一个 ImageData 对象，该对象表示画布指定部分的底层像素数据。

此方法不受画布变换矩阵的影响。如果指定的矩形超出画布边界，则画布外的像素在返回的 ImageData 对象中为透明黑色。

注意：可以使用 putImageData() 方法将图像数据绘制到画布上。

语法

您可以在 使用画布进行像素操作 中找到有关 getImageData() 和画布内容的一般操作的更多信息。
getImageData(sx, sy, sw, sh)
getImageData(sx, sy, sw, sh, settings)

js

参数

sx

要从中提取 ImageData 的矩形的左上角的 x 轴坐标。

sy

要从中提取 ImageData 的矩形的左上角的 y 轴坐标。

sw

要从中提取 ImageData 的矩形的宽度。正值表示向右，负值表示向左。

sh

要从中提取 ImageData 的矩形的高度。正值表示向下，负值表示向上。

settings 可选

  • 具有以下属性的对象

colorSpace: 指定图像数据的颜色空间。可以设置为 "srgb" 表示 sRGB 颜色空间，或者设置为 "display-p3" 表示 display-p3 颜色空间。

返回值

包含画布指定矩形的图像数据的 ImageData 对象。矩形的左上角坐标为 (sx, sy)，而右下角坐标为 (sx + sw - 1, sy + sh - 1)。

异常

IndexSizeError DOMException

如果 sw 或 sh 为零，则抛出此异常。

SecurityError DOMException

示例

画布包含或可能包含从与文档自身加载的来源不同的来源加载的像素。为了避免在这种情况下抛出 SecurityError DOMException，请配置 CORS 以允许以这种方式使用源图像。请参阅 允许跨域使用图像和画布。

从画布获取图像数据

此示例绘制图像，然后使用 getImageData() 获取画布的一部分。

HTML

我们使用 getImageData() 提取图像的一部分，从 (10, 20) 开始，宽度为 80，高度为 230。然后，我们将此部分绘制三次，将部分逐步放置在最后一个部分的下方和右侧。
<canvas id="canvas" width="700" height="400"></canvas>

JavaScript

您可以在 使用画布进行像素操作 中找到有关 getImageData() 和画布内容的一般操作的更多信息。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const image = new Image();
image.src = "plumeria.jpg";
image.addEventListener("load", () => {
  ctx.drawImage(image, 0, 0, 233, 320);

  const imageData = ctx.getImageData(10, 20, 80, 230);
  ctx.putImageData(imageData, 260, 0);
  ctx.putImageData(imageData, 380, 50);
  ctx.putImageData(imageData, 500, 100);
});

html

结果

颜色空间转换

您可以在 使用画布进行像素操作 中找到有关 getImageData() 和画布内容的一般操作的更多信息。
const context = canvas.getContext("2d", { colorSpace: "display-p3" });
context.fillStyle = "color(display-p3 0.5 0 0)";
context.fillRect(0, 0, 10, 10);

// Get ImageData converted to sRGB
const imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(imageData.colorSpace); // "srgb"

规范

可选的 colorSpace 设置允许您以所需的格式获取图像数据。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-getimagedata-dev

另请参阅