ผ้าใบ HTML createImageData ()เมธอด

ตัวอย่าง

สร้างวัตถุ 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);

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

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่

Method
createImageData()	Yes	9.0	Yes	Yes	Yes

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

เมธอด createImageData() จะสร้างออบเจ็กต์ ImageData ใหม่ที่ว่างเปล่า ค่าพิกเซลของวัตถุใหม่จะเป็นสีดำโปร่งใสโดยค่าเริ่มต้น

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

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

ดังนั้น สีดำใสหมายถึง: (0,0,0,0)

ข้อมูลสี/อัลฟาถูกเก็บไว้ในอาร์เรย์ และเนื่องจากอาร์เรย์ประกอบด้วยข้อมูล 4 ชิ้นสำหรับทุกพิกเซล ขนาดของอาร์เรย์จึงเป็น 4 เท่าของขนาดของออบเจ็กต์ ImageData: width*height*4 (วิธีที่ง่ายกว่าในการค้นหาขนาดของอาร์เรย์คือการใช้ ImageDataObject.data.length)

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

เคล็ดลับ:หลังจากที่คุณจัดการข้อมูลสี/อัลฟาในอาร์เรย์แล้ว คุณสามารถคัดลอกข้อมูลรูปภาพกลับเข้าสู่ผืนผ้าใบโดยใช้ เมธอดputImageData()

ตัวอย่าง:

ไวยากรณ์สำหรับการสร้างพิกเซลแรกในวัตถุ 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;

JavaScript Syntax

มีวิธี createImageData() สองเวอร์ชัน:

1. สิ่งนี้จะสร้างวัตถุ ImageData ใหม่ด้วยขนาดที่ระบุ (เป็นพิกเซล):

ไวยากรณ์ JavaScript:	var imgData= บริบท .createImageData( ความกว้าง ความสูง );

2. สิ่งนี้จะสร้างวัตถุ ImageData ใหม่ด้วยขนาดเดียวกับวัตถุที่ระบุโดย anotherImageData (ซึ่งจะไม่คัดลอกข้อมูลรูปภาพ):

JavaScript syntax:	var imgData=context.createImageData(imageData);

ค่าพารามิเตอร์

Parameter	Description
width	The width of the new ImageData object, in pixels
height	The height of the new ImageData object, in pixels
imageData	anotherImageData object

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