CanvasRenderingContext2D: createImageData() 方法

基线 广泛可用

此功能已经很成熟，可以在许多设备和浏览器版本上运行。它自 2015 年 7 月.

报告反馈

语法

**CanvasRenderingContext2D.createImageData()** 方法是 Canvas 2D API 的一部分，它创建了一个具有指定尺寸的新空白ImageData 对象。新对象中的所有像素都是透明黑色。
createImageData(width, height)
createImageData(width, height, settings)
createImageData(imagedata)

js

参数

width

要赋予新 ImageData 对象的宽度。负值会使矩形绕垂直轴翻转。

height

要赋予新 ImageData 对象的高度。负值会使矩形绕水平轴翻转。

settings 可选

  • 具有以下属性的对象
colorSpace：指定图像数据的颜色空间。可以设置为 "srgb" 表示 sRGB 颜色空间，或者设置为 "display-p3" 表示 display-p3 颜色空间。

imagedata

要从中复制宽度和高度的现有 ImageData 对象。不会复制图像本身。

返回值

具有指定宽度和高度的新ImageData 对象。新对象中填充了透明黑色像素。

异常

IndexSizeError DOMException

示例

如果 width 或 height 参数为零，则会抛出此异常。

创建空白 ImageData 对象

此代码片段使用 createImageData() 方法创建一个空白 ImageData 对象。
<canvas id="canvas"></canvas>

html

**CanvasRenderingContext2D.createImageData()** 方法是 Canvas 2D API 的一部分，它创建了一个具有指定尺寸的新空白ImageData 对象。新对象中的所有像素都是透明黑色。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const imageData = ctx.createImageData(100, 50);
console.log(imageData);
// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }

生成的 对象的宽度为 100 像素，高度为 50 像素，总共 5,000 个像素。ImageData 对象中的每个像素都包含四个数组值，因此对象的 data 属性的长度为 4 × 5,000，即 20,000。

填充空白 ImageData 对象

此代码片段使用 createImageData() 方法创建一个空白 ImageData 对象。
<canvas id="canvas"></canvas>

此示例创建了一个新的 ImageData 对象，并用紫色像素填充它。

**CanvasRenderingContext2D.createImageData()** 方法是 Canvas 2D API 的一部分，它创建了一个具有指定尺寸的新空白ImageData 对象。新对象中的所有像素都是透明黑色。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);

// Iterate through every pixel
for (let i = 0; i < imageData.data.length; i += 4) {
  // Modify pixel data
  imageData.data[i + 0] = 190; // R value
  imageData.data[i + 1] = 0; // G value
  imageData.data[i + 2] = 210; // B value
  imageData.data[i + 3] = 255; // A value
}

// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);

由于每个像素都包含四个值，因此 for 循环以四个值的倍数递增。与每个像素关联的数组值分别是 R（红色）、G（绿色）、B（蓝色）和 A（alpha），按此顺序。

结果

更多示例

规范

有关使用 createImageData() 和 ImageData 对象的更多示例，请参阅 使用 Canvas 进行像素操作 和 ImageData.data。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-createimagedata-dev

另请参阅