HTML canvas ImageData คุณสมบัติข้อมูล

ตัวอย่าง

สร้างออบเจ็กต์ ImageData 100*100 พิกเซล โดยที่ทุกพิกเซลถูกตั้งค่าเป็นสีแดง:

ผ้าใบ

จาวาสคริปต์:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์

Property
data	Yes	9.0	Yes	Yes	Yes

ความหมายและการใช้งาน

คุณสมบัติ data ส่งคืนวัตถุที่มีข้อมูลรูปภาพของวัตถุ ImageData ที่ระบุ

สำหรับทุกพิกเซลในวัตถุ ImageData มีข้อมูลสี่ส่วน ค่า RGBA:

R - สีแดง (จาก 0-255)
G - สีเขียว (จาก 0-255)
B - สีฟ้า (จาก 0-255)
A - The alpha channel (จาก 0-255; 0 โปร่งใสและ 255 คือ มองเห็นได้อย่างเต็มที่)

ข้อมูลสี/อัลฟาอยู่ในอาร์เรย์ และจัดเก็บไว้ในคุณสมบัติข้อมูลของออบเจกต์ ImageData

ตัวอย่าง:

ไวยากรณ์สำหรับการสร้างพิกเซลแรกในวัตถุ ImageData เป็นสีแดง:

imgData=ctx.createImageData(100, 100);

imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

ไวยากรณ์สำหรับการสร้างพิกเซลที่สองในวัตถุ ImageData เป็นสีเขียว:

imgData = ctx.createImageData(100, 100);

imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

เคล็ดลับ:ดูที่createImageData() , getImageData()และ putImageData()เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวัตถุ ImageData

JavaScript Syntax

ไวยากรณ์ JavaScript:	imageData .data ;

❮ อ้างอิงผ้าใบ HTML