View in EnglishAlways switch to English

CanvasRenderingContext2D：getImageData() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

Canvas 2D API 的CanvasRenderingContext2D.getImageData() 返回一个ImageData 对象，用于描述 canvas 指定区域的隐含像素数据。

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

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

你可以在像素操作中找到关于getImageData() 和画布内容的常规操作的更多信息。

语法

getImageData(sx, sy, sw, sh)getImageData(sx, sy, sw, sh, settings)

参数

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)。

异常

IndexSizeErrorDOMException: 如果sw 或sh 中有任何一个为零时抛出。
SecurityErrorDOMException: 画布包含或可能包含从与文档本身加载的原点不同的源加载的像素。要避免在此情况下抛出SecurityErrorDOMException，请配置 CORS 允许以这种方式使用源图像。参见允许图片和 canvas 跨源使用。

示例

从画布获取图像数据

这个示例绘制了一幅图像，然后使用getImageData() 方法来获取画布的一部分内容。

我们使用getImageData() 提取图像的一个片段，从坐标(10, 20) 开始，宽度为80，高度为230。然后，我们将这个片段绘制三次，每次都逐渐将片段位置放在上一个片段的右下方。

HTML

html

<canvas width="700" height="400"></canvas>

JavaScript

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);});

结果

色彩空间转换

可选的colorSpace 设置允许你以所需的格式获取图像数据。

const context = canvas.getContext("2d", { colorSpace: "display-p3" });context.fillStyle = "color(display-p3 0.5 0 0)";context.fillRect(0, 0, 10, 10);// 获取转换为 sRGB 的 ImageDataconst imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });console.log(imageData.colorSpace); // "srgb"