Canvas API được thiết kế để vẽ đồ họa trong trình duyệt web. Nó có thể được sử dụng cho hoạt hình, hình ảnh trò chơi, trực quan hóa dữ liệu, chỉnh sửa hình ảnh và xử lý video thời gian thực, cũng như theo dõi trực tuyến thông qua nhận dạng dấu vân tay trình duyệt. Công nghệ này dựa trên sự thay đổi cách hiển thị hình ảnh trên vải trên các trình duyệt web và nền tảng khác nhau để tạo ra dấu vân tay số cá nhân của trình duyệt người dùng. Tuy nhiên, nó có thể lặp lại trong môi trường thiết bị hoàn toàn giống nhau.

Kiểm tra chức năng Canvas

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL(Thường được sử dụng trong nhận dạng dấu vân tay)
• OffscreenCanvas API
• Canvas native

  Canvas dấu vân tay cũng có thể được sửa đổi bởi tiện ích mở rộng trình duyệt, nhưng rất dễ được nhận biết

• Ổn định

  Trên cùng một thiết bị và môi trường trình duyệt, canvas có tính ổn định

• Tiếng ồn không do con người tạo ra

  Một số trình duyệt dấu vân tay hoặc plugin dấu vân tay có thể thêm tham số vào tiếng ồn canvas, nhưng vẫn có thể bị nhận dạng.

Chi tiết hình ảnh

Lý do tạo ra dấu vân tay Canvas

Phương thức hiển thị hình ảnh Canvas trên bức vẽ có thể thay đổi do trình duyệt web, hệ điều hành, card đồ họa và các yếu tố khác, từ đó tạo ra hình ảnh độc đáo có thể được sử dụng để tạo dấu vân tay.

1. Chống răng cưa

Công nghệ chống răng cưa tương đương với một bộ lọc làm đẹp, được sử dụng rộng rãi. Nếu chức năng làm mịn phông chữ không được kích hoạt trong hệ điều hành, một số phông chữ sẽ trông rất tệ trên màn hình máy tính. Nói chung, hệ điều hành Windows sẽ mặc định kích hoạt chức năng làm mịn phông chữ và hình ảnh. Trong Mac OS X, chống răng cưa dường như chỉ áp dụng cho phông chữ có kích thước nhỏ hơn một kích thước cụ thể. Không chỉ ở cấp độ hệ điều hành, một số trình duyệt cũng sẽ tích hợp công nghệ chống răng cưa của riêng mình, như Safari sử dụng động cơ hiển thị phông chữ tích hợp của riêng mình. Và quan trọng nhất, công nghệ chống răng cưa cũng có hiệu lực khi vẽ phông chữ và hình ảnh trên Canvas.

Như hình dưới đây cho thấy, bên trái là trạng thái không kích hoạt làm mượt phông chữ, trong khi bên phải đã kích hoạt:

Công nghệ chống răng cưa sẽ tạo ra một số pixel không màu thuần túy, giá trị pixel trạng thái trung gian này lại bị ảnh hưởng bởi hồ sơ màu của card màn hình, từ đó dẫn đến màu sắc của nó có thể không hoàn toàn giống nhau, chúng tôi gọi nó là nhiễu. Trên một khung vẽ đủ lớn, vẽ cùng một kiểu chữ và hình ảnh, sau đó tính toán tất cả dữ liệu pixel, ta có thể thu được dữ liệu dấu vân tay tương đối duy nhất.

2. Điều chỉnh phông chữ (Font Hinting)

Một đặc điểm của việc điều chỉnh nhỏ là khớp lưới, tức là bằng cách sửa đổi chiều cao và chiều rộng của ký tự chữ, để ký tự phù hợp với lưới pixel được thiết lập trên màn hình hiển thị. Hình ảnh hiển thị lên màn hình là từng ô lưới nhỏ, chữ có thể di chuyển sang trái hoặc phải để đảm bảo hiển thị chính xác trên lưới, điều này cũng để đảm bảo hình dạng và bố cục chữ nhìn chung giống nhau trên các màn hình khác nhau.

Qua hình ảnh GIF dưới đây là tập hợp của hàng chục hình ảnh canvas từ các người dùng khác nhau, có thể thấy rõ sự khác biệt trong cách hiển thị của cùng một đoạn mã trên các môi trường thiết bị khác nhau:

Như chi tiết hình ảnh đã nêu trên, nói chung, chúng ta có thể gọi hàm toDataURL để lấy dữ liệu base64 của hình ảnh Canvas, hoặc cũng có thể lấy tổng kiểm tra CRC của khối IDAT từ khối dữ liệu của hình ảnh PNG được tạo từ Canvas. Sau đó, chúng ta có thể tính giá trị băm của chuỗi này (base64 hoặc tổng kiểm tra CRC) (thuật toán cụ thể phụ thuộc vào từng trang web) để sử dụng như dấu vân tay Canvas.

Lưu ý: Có nhiều lý do khiến Dấu vân tay Canvas khác nhau trên các trang web khác nhau, việc sử dụng các chuỗi khác nhau (base64 hoặc CRC checksum), thuật toán băm khác nhau (MD5, SHA, MUMUHASH, v.v.) đều khiến Dấu vân tay Canvas hoàn toàn khác biệt, nhưng Dấu vân tay Canvas thực sự là ổn định, vì vậy dưới cùng một trình duyệt và môi trường thiết bị, Dấu vân tay Canvas trên cùng một trang web là cố định. Đây cũng là cơ sở lý thuyết cho việc sử dụng Dấu vân tay Canvas để hỗ trợ nhận dạng người dùng, nó có tính ổn định.