ตัวอย่าง
โค้ดข้างล่างนี้คัดลอกข้อมูลพิกเซลสำหรับสี่เหลี่ยมที่ระบุบนผืนผ้าใบด้วย 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);
} ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| putImageData() | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
ความหมายและการใช้งาน
putImageData() วิธีการทำให้ข้อมูลภาพ (จากวัตถุ ImageData ระบุ) กลับขึ้นไปบนผืนผ้าใบ
เคล็ดลับ: อ่านเกี่ยวกับ getImageData() วิธีการที่คัดลอกข้อมูลพิกเซลสำหรับสี่เหลี่ยมที่ระบุบนผืนผ้าใบ
เคล็ดลับ: อ่านเกี่ยวกับ createImageData() วิธีการที่จะสร้างใหม่วัตถุ ImageData ว่างเปล่า
JavaScript ไวยากรณ์
| ไวยากรณ์ javascript: | context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight ); |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ |
|---|---|
| imgData | ระบุวัตถุ ImageData ที่จะนำกลับเข้าสู่ผืนผ้าใบ |
| x | พิกัด x พิกเซลของมุมบนซ้ายของวัตถุ ImageData |
| y | พิกัด y พิกเซลของมุมบนซ้ายของวัตถุ ImageData |
| dirtyX | ไม่จำเป็น แนวนอน (x) ค่าพิกเซลที่จะวางภาพบนผืนผ้าใบ |
| dirtyY | ไม่จำเป็น แนวตั้ง (Y) ค่าพิกเซลที่จะวางภาพบนผืนผ้าใบ |
| dirtyWidth | ไม่จำเป็น ความกว้างที่จะใช้ในการวาดภาพบนผืนผ้าใบ |
| dirtyHeight | ไม่จำเป็น ความสูงที่จะใช้ในการวาดภาพบนผืนผ้าใบ |