Phương pháp HTML canvas putImageData ()

Thí dụ

Đoạn mã dưới đây sao chép dữ liệu pixel cho một hình chữ nhật được chỉ định trên canvas với getImageData (), sau đó đưa dữ liệu hình ảnh trở lại canvas với 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);
}

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.

Method
putImageData()	Yes	9.0	Yes	Yes	Yes

Định nghĩa và Cách sử dụng

Phương thức putImageData () đặt dữ liệu hình ảnh (từ một đối tượng ImageData được chỉ định) trở lại canvas.

Mẹo: Đọc về phương thức getImageData () sao chép dữ liệu pixel cho một hình chữ nhật được chỉ định trên canvas.

Mẹo: Đọc về phương thức createImageData () để tạo một đối tượng ImageData mới, trống.

Cú pháp JavaScript

Cú pháp JavaScript:	context .putImageData ( imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight );

Giá trị tham số

Parameter	Description
imgData	Specifies the ImageData object to put back onto the canvas
x	The x-coordinate, in pixels, of the upper-left corner of the ImageData object
y	The y-coordinate, in pixels, of the upper-left corner of the ImageData object
dirtyX	Optional. The horizontal (x) value, in pixels, where to place the image on the canvas
dirtyY	Optional. The vertical (y) value, in pixels, where to place the image on the canvas
dirtyWidth	Optional. The width to use to draw the image on the canvas
dirtyHeight	Optional. The height to use to draw the image on the canvas

❮ Tham chiếu HTML Canvas