Phương thức Canvas getImageData()

Tài liệu tham khảo Canvas

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

getImageData() Phương thức này 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, đều 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 (0-255)
  • A - alpha kênh (0-255; 0 là trong suốt, 255 là hoàn toàn nhìn thấy được)

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

Lưu ý:Sau khi hoàn thành việc thao tác với 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ụ:

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

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

Thử trực tiếp

Lưu ý: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.

Sử dụng công thức này để duyệt qua tất cả các pixel và thay đổi giá trị màu của chúng:

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

Xin xem chi tiết ở ví dụ dưới đây “Thử nghiệm cá nhân.”

Mô hình

Ví dụ 1

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

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

Syntax

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

Giá trị của parameter

Parameter 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 vùng矩 hình cần sao chép.
height Chiều cao của vùng矩 hình cần sao chép.

Thêm ví dụ

Ví dụ 2

Hình ảnh cần 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
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ử trực tiếp

Hỗ trợ trình duyệt

Số liệu trong bảng ghi chú về phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ thuộc tính này.

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 trước không hỗ trợ phần tử <canvas>.

Tài liệu tham khảo Canvas