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 ด้วยพิกเก็ล
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> อิเล็กทรอนิกส์

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