Phương thức HTML canvas createImageData ()

Thí dụ

Tạo một đối tượng ImageData 100 * 100 pixel trong đó mọi pixel đều có màu đỏ và đặt nó lên canvas:

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 đủ phương pháp này.

Method
createImageData()	Yes	9.0	Yes	Yes	Yes

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

Phương thức createImageData () tạo một đối tượng ImageData trống mới. Giá trị pixel của đối tượng mới có màu đen trong suốt theo mặc đị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)

Vì vậy, màu đen trong suốt cho biết: (0,0,0,0).

Thông tin màu / alpha được giữ trong một mảng và vì mảng chứa 4 phần thông tin cho mỗi pixel nên kích thước của mảng gấp 4 lần kích thước của đối tượng ImageData: width * height * 4. (Một cách dễ dàng hơn để tìm kích thước của mảng là sử dụng ImageDataObject.data.length)

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

Mẹo: Sau khi bạn đã xử lý thông tin màu / alpha trong mảng, bạn có thể sao chép dữ liệu hình ảnh trở lại canvas bằng phương thức putImageData () .

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;

Cú pháp JavaScript

Có hai phiên bản của phương thức createImageData ():

1. Thao tác này tạo một đối tượng ImageData mới với các kích thước được chỉ định (tính bằng pixel):

Cú pháp JavaScript:	var imgData = context .createImageData ( width, height );

2. Thao tác này tạo một đối tượng ImageData mới có cùng kích thước với đối tượng được chỉ định bởi anotherImageData (điều này không sao chép dữ liệu hình ảnh):

JavaScript syntax:	var imgData=context.createImageData(imageData);

Giá trị tham số

Parameter	Description
width	The width of the new ImageData object, in pixels
height	The height of the new ImageData object, in pixels
imageData	anotherImageData object

❮ Tham chiếu HTML Canvas