Phương thức getImageData () canvas HTML
Thí dụ
Đoạn mã dưới đây sao chép dữ liệu pixel cho một hình chữ nhật được chỉ định trên canvas với getImageData (), sau đó đưa dữ liệu hình ảnh trở lại canvas với putImageData ():
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);
}
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 | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
Định nghĩa và Cách sử dụng
Phương thức getImageData () trả về một đối tượng ImageData sao chép dữ liệu pixel cho hình chữ nhật được chỉ định trên canvas.
Lưu ý: Đối tượng ImageData không phải là một bức tranh, nó chỉ định một phần (hình chữ nhật) trên canvas và lưu giữ thông tin của mọi pixel bên trong hình chữ nhật đó.
Đố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)
Thông tin màu / alpha được giữ trong một mảng và đượ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 () .
Thí dụ:
Mã để nhận 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];
blue=imgData.data[2];
alpha=imgData.data[3];
Mẹo: Bạn cũng có thể sử dụng phương thức getImageData () để đảo ngược màu của mọi pixel của hình ảnh trên canvas.
Lặp qua tất cả các pixel và thay đổi các giá trị màu bằng công thức sau:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Xem bên dưới để biết ví dụ về "Hãy tự mình thử"!
Cú pháp JavaScript
| Cú pháp JavaScript: | context .getImageData ( x, y, width, height ); |
|---|
Giá trị tham số
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Các ví dụ khác
Hình ảnh sử dụng:
Thí dụ
Sử dụng getImageData () để đảo ngược màu của mọi pixel của hình ảnh trên canvas:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
var i;
for (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);
❮ Tham chiếu HTML Canvas