ตัวอย่าง
สร้าง 100*100 พิกเซลวัตถุ ImageData ที่ทุกพิกเซลเป็นสีแดงและใส่มันลงบนผืนผ้าใบ:
javascript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var 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); ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| createImageData() | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
ความหมายและการใช้งาน
createImageData() วิธีการสร้างใหม่วัตถุ ImageData ว่างเปล่า ค่าพิกเซลวัตถุใหม่เป็นสีดำโปร่งใสโดยค่าเริ่มต้น
สำหรับพิกเซลในวัตถุ ImageData ทุกมีสี่ชิ้นส่วนของข้อมูลค่า RGBA นี้:
R - สีแดง (0-255)
G - สีเขียว (0-255)
B - สีฟ้า (0-255)
- ช่องอัลฟา (0-255; 0 มีความโปร่งใสและสามารถมองเห็นได้ 255 เต็ม)
ดังนั้นสีดำโปร่งใสบ่งชี้: (0,0,0,0)
ข้อมูลสี / อัลฟาจะจัดขึ้นในอาร์เรย์และตั้งแต่อาร์เรย์มี 4 ชิ้นของข้อมูลสำหรับทุกพิกเซลขนาดของอาร์เรย์คือ 4 เท่าของขนาดของวัตถุ ImageData ที่กว้าง * สูง * 4 (เป็นวิธีที่ง่ายต่อการหาขนาดของอาร์เรย์คือการใช้ ImageDataObject.data.length)
อาร์เรย์ที่มีข้อมูลสี / อัลฟาจะถูกเก็บไว้ใน data คุณสมบัติของวัตถุ 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 ไวยากรณ์
มีสองรุ่นคือรุ่น createImageData() วิธีการ:
1. สร้างวัตถุ ImageData ใหม่ที่มีขนาดที่ระบุ (พิกเซล):
| ไวยากรณ์ javascript: | var imgData=context.createImageData(width,height); |
|---|
2. สร้างวัตถุ ImageData ใหม่ที่มีขนาดเดียวกันเป็นวัตถุที่ระบุโดย anotherImageData (ไม่คัดลอกข้อมูลภาพ):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ |
|---|---|
| width | ความกว้างของวัตถุ ImageData ใหม่พิกเซล |
| height | ความสูงของวัตถุ ImageData ใหม่พิกเซล |
| imageData | วัตถุ anotherImageData |