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 |
瀏覽器相容性
載入中…