Canvas getImageData() 方法
定義和用法
getImageData() 方法返回 ImageData 對象，該對象複製了畫布指定矩形的像素數據。
對於 ImageData 對象中的每個像素，都存在著四個方面的資訊，即 RGBA 值：
- R - 紅色 (0-255)
- G - 綠色 (0-255)
- B - 藍色 (0-255)
- A - alpha 通道 (0-255; 0 是透明的，255 是完全可見的)
color/alpha 以數組形式存在，並存儲於 ImageData 對象的 data 屬性中。
คำแนะนำ:在操作完成數組中的 color/alpha 資訊之後，您可以使用 putImageData() 方法將圖像數據複製回畫布上。
範例：
以下代碼可以獲得被返回的 ImageData 對象中第一個像素的 color/alpha 資訊：
red=imgData.data[0]; green=imgData.data[1]; blue=imgData.data[2]; alpha=imgData.data[3];
คำแนะนำ:您也可以使用 getImageData() 方法來反轉畫布上某個圖像的每個像素的顏色。
使用此公式遍歷所有像素，並更改其顏色值：
red=255-old_red; green=255-old_green; blue=255-old_blue;
（請見下面的“親自試一試”範例。）
ตัวอย่าง
ตัวอย่าง 1
รหัสใต้นี้ทำการคัดลอกข้อมูลพิกซ์ของพื้นที่ที่กำหนดบนแผ่นกราฟโดยใช้ getImageData() และจัดเก็บข้อมูลรูปภาพที่คัดลอกโดยใช้ putImageData() กลับเข้าไปบนแผ่นกราฟ:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}
คำแนะนำ:ตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า
ภาษาบอก
var imgData = context.getImageData(x,y,width,height);
ค่าตัวแปร
| ตัวแปร | คำอธิบาย |
|---|---|
| x | ตำแหน่ง x ของมุมบนซ้ายของพื้นที่ที่จะคัดลอก |
| y | ตำแหน่ง y ของมุมบนซ้ายของพื้นที่ที่จะคัดลอก |
| width | ความกว้างของพื้นที่สี่เหลี่ยมที่จะคัดลอก |
| height | ความสูงของพื้นที่สี่เหลี่ยมที่จะคัดลอก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง 2
รูปภาพที่จะใช้
ใช้ getImageData() ในการความเปลี่ยนแปลงสีของแต่ละพิกซ์ในรูปภาพบนแผ่นกราฟ
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 0, 0);
var imgData=ctx.getImageData(0, 0, c.width, c.height);
// ความเปลี่ยนแปลงสี
for (var i = 0; i < imgData.data.length; i += 4)
{
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i + 1] = 255 - imgData.data[i + 1];
imgData.data[i + 2] = 255 - imgData.data[i + 2];
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 0, 0);
การสนับสนุนของบราวเซอร์
ตัวเลขในตารางบอกเล่าถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ครบถ้วน
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ:Internet Explorer 8 และตัวรุ่นเก่ากว่าไม่สนับสนุนประกายภาพ <canvas>
