ตัวอย่าง
โค้ดข้างล่างนี้คัดลอกข้อมูลพิกเซลสำหรับสี่เหลี่ยมที่ระบุบนผืนผ้าใบด้วย 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ความหมายและการใช้งาน
putImageData() วิธีการทำให้ข้อมูลภาพ (from a specified ImageData object) กลับขึ้นไปบนผืนผ้าใบ
Tip: อ่านเกี่ยวกับ getImageData() วิธีการที่คัดลอกข้อมูลพิกเซลสำหรับสี่เหลี่ยมที่ระบุบนผืนผ้าใบ
Tip: อ่านเกี่ยวกับ 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 | ไม่จำเป็น. ความสูงที่จะใช้ในการวาดภาพบนผืนผ้าใบ |
<ผ้าใบวัตถุ