getImageData() trong Canvas
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 < ! DOCTYPE html > < html > < body > < canvas id = "myCanvas" awidth = "300" height = "150" ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> 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); } </script> <button onclick="copy()">Sao chép</button> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| getImageData() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức getImageData() trả về một đối tượng ImageData đã được sao chép dữ liệu về từng pixel trong hình chữ nhật trên canvas.
Lưu ý: Đối tượng ImageData không phải là một bức ảnh mà nó chỉ là một phần (hình chữ nhật) trên canvas và lưu trữ thông tin về từng pixel trong hình chữ nhật đó.
Mỗi pixel trong đối tượng ImageData có chứa 4 thông tin, thông tin đó chính là giá trị RGBA:
R – Màu đỏ (từ 0-255)
G – Màu xanh lá cây (từ 0-255)
B – Màu xanh da trời (từ 0-255)
A – Độ mờ (từ 0-255; 0 là trong suốt và 255 là hiển thị đầy đủ)
Thông tin về màu/độ mờ được chứa trong một mạng và được lưu trữ trong thuộc tính data của đối tượng ImageData.
Mẹo: Sau khi bạn có thông tin về màu/độ mờ trong mảng, bạn có thể sao chép dữ liệu này để hiển thị trên canvas bằng phương thức putImageData().
Ví dụ
Đoạn mã lấy thông tin màu/độ mờ của pixel đầu tiên trong đối tượng ImageData được trả về:
|
1 2 3 4 |
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 từng pixel của ảnh trên thẻ canvas.
Để thay đổi màu sắc của từng điểm ảnh, bạn có thể sử dụng công thức sau:
|
1 2 3 |
red=255-old_red; green=255-old_green; blue=255-old_blue; |
Xem chi tiết ở ví dụ bên dưới
Cú pháp JavaScript:
Cú pháp JavaScript: context.getImageData(x,y,awidth,height);
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| x | Tọa độ X (đơn vị đo là pixel) góc trên bên trái của điểm bắt đầu sao chép |
| y | Tọa độ Y (đơn vị đo là pixel) góc trên bên trái của điểm bắt đầu sao chép |
| awidth | Chiều rộng của khu vực hình chữ nhật bạn muốn sao chép |
| height | Chiều cao của khu vực hình chữ nhật bạn muốn sao chép |
Ví dụ
Ảnh sử dụng:
Sử dụng getImageData() để đảo ngược màu từng điểm ảnh của một bức ảnh trên canvas:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <body> <img id="scream" src="/pictures/picfullsizes/2018/09/19/soe1537343068.jpg" alt="The Scream" awidth="220" height="277"> <canvas id="myCanvas" awidth="220" height="277" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> document.getElementById("scream").onload = function() { 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.awidth, 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); }; </script> </body> </html> |
Demo
