Phương pháp getImageData() của canvas HTML

Tài liệu tham khảo Canvas HTML5

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

getImageData() Phương pháp trả về đối tượng ImageData, đối tượng này sao chép dữ liệu pixel của hình vuông được chỉ định trên canvas.

Đố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 nhìn thấy được)

Màu/alpha tồn tại dưới dạng mảng và được lưu trữ trong đối tượng ImageData của data thuộc tính.

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

Ví dụ:

Dưới đây là mã để lấy thông tin màu/alpha của pixel đầu tiên trong đối tượng ImageData được trả về:

red=imgData.data[0];
green=imgData.data[1];
green=imgData.data[1];
blue=imgData.data[2];

Thử ngay

Lưu ý:alpha=imgData.data[3];

Bạn cũng có thể sử dụng phương thức getImageData() để đảo ngược màu của mỗi pixel trên một hình ảnh nào đó trên canvas.

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

(Xin xem ví dụ "Thử ngay" bên dưới.)

Ví dụ

Ví dụ 1

Mã dưới đây sử dụng getImageData() để sao chép dữ liệu pixel của khung hình được chỉ định trên canvas, sau đó sử dụng putImageData() để đặt lại dữ liệu hình ảnh trên 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);
}

Thử ngay

Lưu ý:Cung cấp thêm các ví dụ ở cuối trang.

Cú pháp

var imgData=context.getImageData(x,y,width,height);

Giá trị tham số

Tham số Mô tả
x Tọa độ x của góc trên cùng bên trái bắt đầu sao chép.
y Tọa độ y của góc trên cùng bên trái bắt đầu sao chép.
width Chiều rộng của khu vực vuông cần sao chép.
height Chiều cao của khu vực vuông cần sao chép.

Các ví dụ khác

Ví dụ 2

Hình ảnh sẽ được sử dụng:

The Tulip

Sử dụng getImageData() để đảo ngược màu của mỗi pixel trê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 img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// Đảo ngược màu sắc
for (var i=0; i<imgData.data.length; i+=4)
  }
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);

Thử ngay

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 HTML5