HTML canvas putImageData() 方法

คู่มืออ้างอิง HTML5 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 ตัวแบบภาพที่ตั้งอยู่ที่มุมบนซ้ายของ ImageData ด้วยหน่วยเปลือกตา
y ตำแหน่งแนวน้ำ (y) ของ ImageData ตัวแบบภาพที่ตั้งอยู่ที่มุมบนซ้ายของ 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>

คู่มืออ้างอิง HTML5 Canvas