Phương thức createImageData() của Canvas

Tài liệu tham khảo Canvas

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

createImageData() Phương pháp tạo đối tượng ImageData mới trống. Giá trị mặc định của pixel trong đối tượng mới là màu đen trong suốt.

Đối với mỗi pixel trong đối tượng ImageData, có bốn thông tin, tức 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 nhìn thấy)

Do đó, màu đen trong suốt được biểu thị là (0,0,0,0).

Color/alpha tồn tại dưới dạng mảng, và vì mảng chứa bốn thông tin cho mỗi pixel, 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 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. data trong thuộc tính.

Lưu ý:Sau khi hoàn thành việc xử lý thông tin color/alpha trong mảng, bạn có thể sử dụng putImageData() Phương thức này sẽ sao chép dữ liệu hình ảnh trở lại canvas.

Ví dụ:

Cú pháp này thay đổi pixel thứ nhất trong đố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 trong đố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ô hình

Tạo đối tượng ImageData 100*100 pixel, mỗi pixel đều là màu đỏ, sau đó đặt nó lên canvas:

Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.

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

Thử ngay

Cú pháp

Có hai phiên bản của 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 giống với đối tượng ImageData đã chỉ định (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

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