CanvasRenderingContext2D.createImageData()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.createImageData() 方法用于创建一个新的、空白的、指定大小的 ImageData 对象。所有的像素在新对象中都是透明的黑色。

语法

js
createImageData(width, height)
createImageData(width, height, settings)
createImageData(imagedata)

参数

width

ImageData 对象的宽度。如果是负值,将围绕垂直轴翻转矩形。

height

ImageData 对象的高度。如果是负值,将围绕水平轴翻转矩形。

settings 可选

一个包含以下属性的对象:

imagedata

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

返回值

指定了宽度和高度的,新的 ImageData 对象。新对象使用透明的黑色像素进行填充。

错误

IndexSizeError

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

示例

创建空的 ImageData 对象

这段代码使用 createImageData() 方法创建一个空的 ImageData 对象。

html
<canvas id="canvas"></canvas>

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

js
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] }

填充空的 ImageData 对象

这个示例创建了一个新的 ImageData 对象,并使用紫色像素填充。

html
<canvas id="canvas"></canvas>

由于每个像素点由四个值表示,for 循环每次迭代增加四个值。与每个像素相关联的数组值分别是 R(红色)、G(绿色)、B(蓝色)和 A(透明度),顺序如上。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);

// 遍历每个像素点
for (let i = 0; i < imageData.data.length; i += 4) {
  // 修改像素数据
  imageData.data[i + 0] = 190; // R 值
  imageData.data[i + 1] = 0; // G 值
  imageData.data[i + 2] = 210; // B 值
  imageData.data[i + 3] = 255; // A 值
}

// 将图像数据绘制到画布上
ctx.putImageData(imageData, 20, 20);

结果

更多示例

关于使用 createImageData()ImageData 对象的更多示例,请参阅使用 Canvas 进行像素操作ImageData.data

规范

Specification
HTML
# dom-context-2d-createimagedata-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createImageData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见