Phương thức createImageData() của HTML canvas
Định nghĩa và cách sử dụng
createImageData() Phương pháp tạo mới đối tượng ImageData trống. Giá trị mặc định của pixel trong đối tượng mới là đen trong suốt.
Đối với mỗi pixel trong đối tượng ImageData, có bốn thông tin, cụ thể là giá trị RGBA:
- R - Màu đỏ (0-255)
- G - Màu xanh lá cây (0-255)
- B - Màu xanh dương (0-255)
- A - Kênh alpha (0-255; 0 là trong suốt, 255 là hoàn toàn hiển thị)
Do đó, black trong suốt biểu thị (0,0,0,0).
color/alpha tồn tại dưới dạng mảng, và vì mảng chứa thông tin của mỗi pixel bốn thông tin, kích thước của mảng là bốn lần kích thước của đối tượng ImageData. (Có cách đơn giản hơn để lấy kích thước của mảng, đó là sử dụng ImageDataObject.data.length)
Mảng chứa thông tin color/alpha được lưu trữ trong đối tượng ImageData của data trong thuộc tính.
Lưu ý:Sau khi hoàn thành việc操作数组中的 color/alpha thông tin, bạn có thể sử dụng putImageData() Phương thức sẽ sao chép dữ liệu hình ảnh về canvas.
Ví dụ:
Cú pháp này thay đổi pixel thứ nhất của đối tượng ImageData thành màu đỏ:
imgData=ctx.createImageData(100,100); imgData.data[0]=255; imgData.data[1]=0; imgData.data[2]=0; imgData.data[3]=255;
Cú pháp này thay đổi pixel thứ hai của đối tượng ImageData thành màu đỏ:
imgData=ctx.createImageData(100,100); imgData.data[4]=0; imgData.data[5]=255; imgData.data[6]=0; imgData.data[7]=255;
Mẫu
Tạo đối tượng ImageData 100x100 pixel, trong đó mỗi pixel đều là màu đỏ, sau đó đặt nó lên canvas:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var 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);
Cú pháp
Có hai phiên bản phương thức createImageData():
1. Tạo mới đối tượng ImageData mới với kích thước đã chỉ định (tính bằng pixel):
var imgData=context.createImageData(width,height);
2. Tạo mới đối tượng ImageData mới có kích thước tương đương với đối tượng ImageData khác đã chỉ định (sẽ không sao chép dữ liệu hình ảnh):
var imgData=context.createImageData(imageData);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| width | Chiều rộng của đối tượng ImageData, tính bằng pixel. |
| height | Chiều cao của đối tượng ImageData, tính bằng pixel. |
| imageData | Một đối tượng ImageData khác. |
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 |
Chú ý:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
