Thuộc tính dữ liệu dữ liệu ImageData HTML canvas

Thí dụ

Tạo đối tượng ImageData 100 * 100 pixel trong đó mọi pixel được đặt thành màu đỏ:

Tranh sơn dầu

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);

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 đủ thuộc tính.

Property
data	Yes	9.0	Yes	Yes	Yes

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

Thuộc tính dữ liệu trả về một đối tượng chứa dữ liệu hình ảnh của đối tượng ImageData được chỉ định.

Đối với mỗi pixel trong đối tượng ImageData có bốn phần thông tin, các giá trị RGBA:

R - Màu đỏ (từ 0-255)
G - Màu xanh lục (từ 0-255)
B - Màu xanh lam (từ 0-255)
A - Kênh alpha (từ 0-255; 0 là trong suốt và 255 là hoàn toàn có thể nhìn thấy)

Thông tin màu / alpha được giữ trong một mảng và được lưu trữ trong thuộc tính dữ liệu của đối tượng ImageData.

Ví dụ:

Cú pháp để tạo pixel đầu tiên trong đối tượng ImageData:

imgData=ctx.createImageData(100, 100);

imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

Cú pháp để làm cho pixel thứ hai trong đối tượng ImageData có màu xanh lục:

imgData = ctx.createImageData(100, 100);

imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

Mẹo: Hãy xem createImageData () , getImageData () và putImageData () để tìm hiểu thêm về đối tượng ImageData.

Cú pháp JavaScript

Cú pháp JavaScript:	imageData .data;

❮ Tham chiếu HTML Canvas