CanvasRenderingContext2D: createImageData() 方法
Canvas 2D API 的 CanvasRenderingContext2D.createImageData() 方法会创建一个具有指定尺寸的新的、空白的 ImageData 对象。新对象中的所有像素都为透明黑色。
语法
js
createImageData(width, height)
createImageData(width, height, settings)
createImageData(imagedata)
参数
width-
为新的
ImageData对象指定的宽度。负值会在垂直轴上翻转矩形。 height-
为新的
ImageData对象指定的 D高度。负值会在水平轴上翻转矩形。 settings可选-
具有以下属性的对象：
colorSpace-
指定图像数据的颜色空间。可以设置为
"srgb"表示 sRGB 颜色空间，或设置为"display-p3"表示 display-p3 颜色空间。 pixelFormat-
指定像素格式。可能的值：
"rgba-unorm8"，表示 RGBA 格式，每通道 8 位无符号归一化格式，使用Uint8ClampedArray。"rgba-float16"：表示 16 位每分量的 RGBA，使用Float16Array。浮点像素值允许表示任意宽色域和高动态范围 (HDR) 的颜色。
imagedata-
一个现有的
ImageData对象，用于复制宽度和高度。图像本身不会被复制。
返回值
一个具有指定宽度和高度的新 ImageData 对象。新对象填充有透明黑色像素。
异常
IndexSizeErrorDOMException-
如果
width或height参数为零，则会抛出异常。
示例
创建空白的 ImageData 对象
此代码片段使用 createImageData() 方法创建一个空白的 ImageData 对象。
html
<canvas id="canvas"></canvas>
生成的对象宽度为 100 像素，高度为 50 像素，共计 5000 像素。ImageData 对象中的每个像素由四个数组值组成，因此对象的 data 属性的长度为 4 × 5000，即 20000。
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（Alpha）。
js
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);
结果
更多示例
有关使用 createImageData() 和 ImageData 对象的更多示例，请参阅 使用 Canvas 进行像素处理 和 ImageData.data。
规范
| 规范 |
|---|
| HTML # dom-context-2d-createimagedata-dev |
浏览器兼容性
加载中…