CanvasRenderingContext2D: getImageData() 方法
Canvas 2D API 的 CanvasRenderingContext2D 方法 getImageData() 会返回一个 ImageData 对象，该对象表示画布指定区域的底层像素数据。
此方法不受画布变换矩阵的影响。如果指定的矩形超出了画布的边界，则在返回的 ImageData 对象中，画布外的像素将显示为透明黑色。
注意： 可以使用 putImageData() 方法将图像数据绘制到画布上。
您可以在 使用 Canvas 进行像素处理 中找到有关 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 颜色空间。 pixelFormat-
指定像素格式。可能的值：
"rgba-unorm8"：表示 8 位每分量无符号归一化格式的 RGBA，使用Uint8ClampedArray。"rgba-float16"：表示 16 位每分量的 RGBA，使用Float16Array。浮点像素值允许表示任意宽色域和高动态范围 (HDR) 的颜色。
返回值
一个 ImageData 对象，包含画布指定矩形的图像数据。矩形左上角的坐标是 (sx, sy)，右下角坐标是 (sx + sw - 1, sy + sh - 1)。
异常
IndexSizeErrorDOMException-
如果
sw或sh为零，则会抛出此异常。 SecurityErrorDOMException-
画布包含或可能包含来自非文档加载源的像素。为避免在此情况下抛出
SecurityErrorDOMException，请配置 CORS 以允许以这种方式使用源图像。请参阅 允许跨域使用图像和画布。
示例
从画布获取图像数据
此示例绘制一个图像，然后使用 getImageData() 获取画布的一部分。
我们使用 getImageData() 提取图像的一个切片，起始于 (10, 20)，宽度为 80，高度为 230。然后我们将此切片绘制三次，将切片依次放置在上一个切片的下方和右侧。
HTML
<canvas id="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);
// Get ImageData converted to sRGB
const imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(imageData.colorSpace); // "srgb"
获取不同像素格式的数据
可选的 pixelFormat 设置允许您以所需的像素格式获取图像数据。
const context = canvas.getContext("2d");
const imageData = context.getImageData(0, 0, 1, 1);
console.log(imageData.pixelFormat); // "rgba-unorm8"
const imageData = context.getImageData(0, 0, 1, 1, {
pixelFormat: "rgba-float16",
});
console.log(imageData.pixelFormat); // "rgba-float16"
规范
| 规范 |
|---|
| HTML # dom-context-2d-getimagedata-dev |
浏览器兼容性
加载中…