CanvasRenderingContext2D: putImageData() 方法
Canvas 2D API 的 CanvasRenderingContext2D.putImageData() 方法可以將給定 ImageData 物件中的資料繪製到畫布上。如果提供了髒矩形，則只繪製該矩形內的畫素。此方法不受畫布變換矩陣的影響。
注意：可以使用 getImageData() 方法從畫布中檢索影像資料。
您可以在文章 使用 Canvas 進行畫素操作 中找到有關 putImageData() 和 Canvas 內容的常規操作的更多資訊。
語法
js
putImageData(imageData, dx, dy)
putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
引數
imageData-
一個包含畫素值陣列的
ImageData物件。 dx-
在目標畫布上放置影像資料的水平位置（x 座標）。
dy-
在目標畫布上放置影像資料的垂直位置（y 座標）。
dirtyX可選-
將要從中提取影像資料的左上角的水平位置（x 座標）。預設為
0。 dirtyY可選-
將要從中提取影像資料的左上角的垂直位置（y 座標）。預設為
0。 dirtyWidth可選-
要繪製的矩形的寬度。預設為影像資料的寬度。
dirtyHeight可選-
要繪製的矩形的高度。預設為影像資料的高度。
返回值
無（undefined）。
異常
NotSupportedErrorDOMException-
如果任何引數是無窮大，則丟擲此異常。
InvalidStateErrorDOMException-
如果
ImageData物件的 data 已被分離，則丟擲此異常。
示例
理解 putImageData
為了理解此演算法的內部工作原理，下面是一個基於 CanvasRenderingContext2D.fillRect() 的實現。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
function putImageData(
ctx,
imageData,
dx,
dy,
dirtyX = 0,
dirtyY = 0,
dirtyWidth = imageData.width,
dirtyHeight = imageData.height,
) {
const data = imageData.data;
const height = imageData.height;
const width = imageData.width;
const limitBottom = dirtyY + dirtyHeight;
const limitRight = dirtyX + dirtyWidth;
for (let y = dirtyY; y < limitBottom; y++) {
for (let x = dirtyX; x < limitRight; x++) {
const pos = y * width + x;
ctx.fillStyle = `rgb(${data[pos * 4 + 0]} ${data[pos * 4 + 1]}
${data[pos * 4 + 2]} / ${data[pos * 4 + 3] / 255})`;
ctx.fillRect(x + dx, y + dy, 1, 1);
}
}
}
// Draw content onto the canvas
ctx.fillRect(0, 0, 100, 100);
// Create an ImageData object from it
const imagedata = ctx.getImageData(0, 0, 100, 100);
// use the putImageData function that illustrates how putImageData works
putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
結果
瀏覽器最佳化導致的資料丟失
警告：由於轉換為和從預乘 alpha 顏色值轉換的損失性質，剛剛使用 putImageData() 設定的畫素可能在等效的 getImageData() 返回時顯示不同的值。
JavaScript
js
const canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
const context = canvas.getContext("2d");
const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imgData.data;
pixels[0 + 0] = 1;
pixels[0 + 1] = 127;
pixels[0 + 2] = 255;
pixels[0 + 3] = 1;
console.log("before:", pixels);
context.putImageData(imgData, 0, 0);
const imgData2 = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels2 = imgData2.data;
console.log("after:", pixels2);
輸出可能如下所示
before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ] after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]
規範
| 規範 |
|---|
| HTML # dom-context-2d-putimagedata-dev |
瀏覽器相容性
載入中…