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