Phương thức putImageData() trên canvas HTML

Tài liệu tham khảo Canvas HTML5

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

putImageData() phương thức sẽ đặt lại dữ liệu hình ảnh (từ đối tượng ImageData được chỉ định) vào canvas.

lưu ý:Xem thêm getImageData() phương thức, nó có thể sao chép dữ liệu pixel của hình vuông cụ thể trên canvas.

lưu ý:Xem thêm createImageData() phương thức, nó có thể tạo ra đối tượng ImageData mới.

ví dụ

Mã nguồn dưới đây sẽ sao chép dữ liệu pixel của hình vuông cụ thể trên canvas và sau đó đặt lại dữ liệu hình ảnh vào canvas bằng phương thức 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);
}

thử trực tiếp

cú pháp

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

giá trị tham số

tham số mô tả
imgData Đối tượng ImageData cần đặt lại trên canvas.
x Tọa độ x của góc trên cùng bên trái của đối tượng ImageData, tính bằng pixel.
y Tọa độ y của góc trên cùng bên trái của đối tượng ImageData, tính bằng pixel.
dirtyX Tùy chọn. Giá trị ngang (x), tính bằng pixel, là vị trí đặt hình ảnh trên canvas.
dirtyY Tùy chọn. Giá trị ngang (y), tính bằng pixel, là vị trí đặt hình ảnh trên canvas.
dirtyWidth Tùy chọn. Chiều rộng được sử dụng để vẽ hình ảnh trên canvas.
dirtyHeight Tùy chọn. Chiều cao được sử dụng để vẽ hình ảnh trên canvas.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

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

Ghi chú:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.

Tài liệu tham khảo Canvas HTML5