1. Tổng quan về Canvas trong trình duyệt
Canvas là gì?
Canvas là một thẻ HTML5 (<canvas>) cho phép vẽ đồ họa 2D/3D bằng JavaScript- Nó hoạt động như một “bảng vẽ số” – nơi bạn có thể tạo hình ảnh, biểu đồ, game, chỉnh sửa ảnh…
Cách hoạt động:
<canvas id="myCanvas" width="300" height="150"></canvas>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Vẽ hình chữ nhật đỏ
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
2. Sự khác biệt giữa getImageData() và toDataURL()
| Tiêu chí |
getImageData() |
toDataURL() |
 Mục đích |
Lấy dữ liệu pixel thô (RGBA) |
Chuyển nội dung canvas thành ảnh |
 Kết quả trả về |
ImageData object → mảng pixel |
Chuỗi ảnh base64 (data:image/png;base64,...) |
| Dữ liệu chi tiết |
Rất chi tiết từng pixel (RGBA) |
Ảnh tổng thể ở mức file |
 Ứng dụng chính |
Phân tích hình ảnh, chỉnh sửa, xử lý pixel |
Lưu, tải xuống, hiển thị ảnh, fingerprint |
 Fingerprinting |
Chính xác, khó fake hơn |
Phổ biến, nhưng dễ bị làm giả hơn |
 Tính tương tác |
Không hiển thị gì |
Có thể dùng để hiển thị ảnh hoặc lưu file |
 Tùy chọn định dạng |
Không có – chỉ dữ liệu thuần |
Hỗ trợ image/png, image/jpeg, chất lượng |
Ví dụ minh họa:
getImageData()
const imgData = ctx.getImageData(0, 0, 1, 1);
console.log(imgData.data); // [R, G, B, A] 0–255
- Trả về mảng
Uint8ClampedArray: [255, 0, 0, 255] = màu đỏ
- Dùng trong phân tích ảnh AI, xử lý đồ họa, hoặc fingerprint sâu (WebGL…)
toDataURL()
const imageStr = canvas.toDataURL("image/png");
console.log(imageStr); // data:image/png;base64,iVBORw0...
- Dùng để lưu ảnh, hiển thị trên web, hoặc gắn vào
<img src="...">
- Thường được hash lại → dùng làm fingerprint đơn giản
3. Trong Fingerprinting:
| Cách dùng |
Mức độ phát hiện |
Mức độ phổ biến |
toDataURL() → hash base64 |
Trung bình |
Rất phổ biến |
getImageData() → phân tích pixel |
Cao |
Cấp cao hơn (ví dụ: creepjs.com) |
