Canvas putImageData() 方法

คู่มือ Canvas

คำอธิบายและการใช้งาน

putImageData() วิธีที่จัดวางข้อมูลภาพกลับสู่กระดานภาพจากวัตถุ ImageData ที่กำหนด.

คำแนะนำ:ดูเพิ่มเติม getImageData() วิธีที่สามารถคัดลอกข้อมูลพิกเซลของส่วนของกระดานภาพที่กำหนดได้.

คำแนะนำ:ดูเพิ่มเติม createImageData() วิธีที่สามารถสร้างวัตถุ ImageData ชั่วคราวได้.

ตัวอย่าง

รหัสที่มีต่อไปนี้ทำการคัดลอกข้อมูลพิกเซลบนส่วนของกระดานภาพที่กำหนด โดยใช้ getImageData() และจัดวางข้อมูลภาพกลับสู่กระดานภาพด้วย putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

ลองด้วยตัวเอง

กฎระเบียบ

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

ตัวแปรค่า

ตัวแปร การอธิบาย
imgData วัตถุ ImageData ที่ต้องการจะจัดวางกลับสู่กระดานภาพ.
x ตำแหน่ง x ของฝั่งบนฝั่งขวาของวัตถุ ImageData ด้วยพิกเซล.
y ตำแหน่ง y ของฝั่งบนฝั่งขวาของวัตถุ ImageData ด้วยพิกเซล.
dirtyX เลือกได้. ค่าระดับน้ำทะเล (x) ด้วยพิกเซล ที่ใช้ในการจัดวางภาพบนกระดานภาพ.
dirtyY เลือกได้. ค่าระดับน้ำทะเล (y) ด้วยพิกเซล ที่ใช้ในการจัดวางภาพบนกระดานภาพ.
dirtyWidth เลือกได้. ความกว้างที่ใช้ในการวาดภาพบนกระดานภาพ.
dirtyHeight เลือกได้. ความสูงที่ใช้ในการวาดภาพบนกระดานภาพ.

โปรแกรมน่าต้องการ

ตัวเลขในตารางระบุรุ่นที่ใช้งานแบบเต็มของคุณสมบัตินี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

หมายเหตุ：Internet Explorer 8 และรุ่นเก่ากว่าไม่สนับสนุนองค์ประกอบ <canvas>

คู่มือ Canvas