ตัวอย่าง
สร้าง 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ความหมายและการใช้งาน
createImageData() วิธีการสร้างใหม่วัตถุ ImageData ว่างเปล่า ค่าพิกเซลวัตถุใหม่เป็นสีดำโปร่งใสโดยค่าเริ่มต้น
สำหรับพิกเซลในวัตถุ ImageData ทุกมีสี่ชิ้นส่วนของข้อมูลค่า RGBA นี้:
R - สีแดง (from 0-255)
G - สีเขียว (from 0-255)
B - สีฟ้า (from 0-255)
เอ - ช่องอัลฟา (from 0-255; 0 is transparent and 255 is fully visible)
ดังนั้นสีดำโปร่งใสบ่งชี้: (0,0,0,0)
ข้อมูลสี / อัลฟาจะจัดขึ้นในอาร์เรย์และตั้งแต่อาร์เรย์มี 4 ชิ้นของข้อมูลสำหรับทุกพิกเซลขนาดของอาร์เรย์คือ 4 เท่าของขนาดของวัตถุ ImageData ที่กว้าง * สูง * 4 (เป็นวิธีที่ง่ายต่อการหาขนาดของอาร์เรย์คือการใช้ ImageDataObject.data.length)
อาร์เรย์ที่มีข้อมูลสี / อัลฟาจะถูกเก็บไว้ใน ข้อมูล คุณสมบัติของวัตถุ ImageData
Tip: หลังจากที่คุณได้จัดการข้อมูลสี / อัลฟาในอาร์เรย์คุณสามารถคัดลอกข้อมูลภาพกลับขึ้นไปบนผืนผ้าใบที่มี putImageData() วิธีการ
Examples:
ไวยากรณ์สำหรับการทำพิกเซลแรกใน 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 (this does not copy the image data) :
| ไวยากรณ์ JavaScript: | var imgData = context createImageData( imageData ) ; |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ |
|---|---|
| width | ความกว้างของวัตถุ ImageData ใหม่พิกเซล |
| height | ความสูงของวัตถุ ImageData ใหม่พิกเซล |
| imageData | วัตถุ anotherImageData |
<ผ้าใบวัตถุ