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