Ví dụ và cách sử dụng phương thức putImageData() để đưa tất cả dữ liệu ảnh (từ một đối tượng ImageData) hiển thị trên canvas.

putImageData() trong Canvas

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

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);

}

</script>

</body>

</html>

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính
putImageData()	4.0	2.0	9.0	3.1	9.0

Phương thức putImageData() đưa tất cả dữ liệu ảnh (từ một đối tượng ImageData) hiển thị trên canvas.

Mẹo: Đọc về phương thức getImageData() để biết cách sao chép các điểm ảnh trong một hình chữ nhật trên canvas.

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

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

Tham số	Miêu tả
imgData	Đối tượng ImageData dùng để hiển thị trên canvas
x	Tọa độ X (đơn vị là pixel) góc trên bên trái của đối tượng ImageData
y	Tọa độ Y (đơn vị là pixel) góc trên bên trái của đối tượng ImageData
dirtyX	Tùy chọn. Giá trị chiều ngang (x - đơn vị là pixel), để hiển thị ảnh trên canvas
dirtyY	Tùy chọn. Giá trị chiều dọc (y - đơn vị là pixel), để hiển thị ảnh trên canvas
dirtyWidth	Tùy chọn. Chiều rộng của ảnh sẽ hiển thị trên canvas
dirtyHeight	Tùy chọn. Chiều cao của ảnh sẽ hiển thị trên canvas

WebVN Cộng đồng web Việt Nam