Thư viện Annotorious cho chú thích hình ảnh JavaScript
Thêm bản vẽ, bình luận và nhãn vào hình ảnh trên trang web bằng thư viện Annotorious trong JavaScript.
Annotorious là gì?
Annotorious là một thư viện chú thích hình ảnh nguồn mở được viết bằng JavaScript cho phép thêm chú thích vào hình ảnh trong trình duyệt bằng cách vẽ các hình dạng ở các vị trí mong muốn của hình ảnh. Bất cứ khi nào một hình dạng được vẽ để chú thích, nó cũng mở một cửa sổ bật lên để thêm bình luận và thậm chí gắn nhãn chú thích bằng cách thêm thẻ. Thư viện cũng hỗ trợ thêm phản hồi vào các chú thích hiện có và cũng xóa chúng nếu cần.
Một số tính năng được thư viện Annotorious hỗ trợ được liệt kê dưới đây:
- Vẽ hình dạng: Annotorious cho phép người dùng vẽ các hình dạng như hình chữ nhật, hình tròn, hình elip và chú thích bằng tay trên hình ảnh.
- Bình luận & Ghi chú: Người dùng có thể thêm bình luận và ghi chú tùy chỉnh vào các phần cụ thể của hình ảnh bằng Annotorious.
- Gắn nhãn hoặc gắn thẻ: Annotorious hỗ trợ khả năng thêm nhãn hoặc thẻ để chú thích các khu vực hoặc đối tượng khác nhau trong một hình ảnh.
- Tích hợp: Annotorious có thể dễ dàng tích hợp vào các trang web và website, cho phép chức năng chú thích liền mạch.
- Tùy chỉnh: Thư viện cung cấp các tùy chọn để tùy chỉnh giao diện và hành vi của chú thích sao cho phù hợp với nhu cầu của bạn.
- Khả năng tương thích: Annotorious hoạt động tốt với nhiều trình duyệt web và nền tảng khác nhau, khiến nó trở nên linh hoạt trong nhiều môi trường khác nhau.
Bắt đầu với Annotorious
Có ba cách để tải Annotorious và bắt đầu sử dụng trong các dự án web của bạn.
1. Cài đặt bằng NPM
Sau khi bạn cài đặt Node.js, hãy chạy lệnh bên dưới:
Cài đặt Annotorious bằng NPM
npm install @recogito/annotorious
2. Sử dụng thư viện lưu trữ qua CDN
Annotorious cũng được lưu trữ trên máy chủ CDN miễn phí và bạn có thể sử dụng các URL như bên dưới:
- JS: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.js
- CSS: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.css
3. Sử dụng bản phát hành được xây dựng sẵn
Tải xuống bản phát hành mới nhất được dựng sẵn của Annotorious từ GitHub. Sau khi giải nén bản phát hành đã nén, bạn sẽ thấy các tệp bên dưới (trong đó annotorious.min.css và annotorious.min.js sẽ được sử dụng trong trang web để chú thích hình ảnh):
- annotorious.min.css
- annotorious.min.js
- annotorious.umd.js.bản đồ
- recogito-polyfills.js
Thêm chú thích vào hình ảnh
Nếu chúng ta tải xuống bản phát hành được dựng sẵn, chúng ta sẽ nhận được các tệp annotorious.min.css và annotorious.min.js có thể được liên kết với trang web trong thẻ head để tích hợp thư viện JavaScript Annotorious. Sau khi thư viện chú thích hình ảnh được tích hợp, chúng ta có thể thêm một hình ảnh cần thêm chú thích và cuối cùng chúng ta có thể viết mã JavaScript để khởi tạo thư viện Annotorious để thêm chú thích vào hình ảnh.
Mã trên chỉ hiển thị một hình ảnh trong trình duyệt đã sẵn sàng cho chú thích. Sau khi hình ảnh và thư viện được tải trong trình duyệt, chúng ta có thể chạm đúp, giữ và kéo vào vị trí mong muốn của hình ảnh để vẽ một hình dạng nhằm làm nổi bật vùng cần thiết. Sau khi hình dạng được vẽ, một cửa sổ bật lên sẽ mở ra cho phép bạn thêm bình luận và thậm chí là gắn nhãn/gắn thẻ cho các bình luận liên quan. Ví dụ, hãy kiểm tra ảnh chụp màn hình bên dưới:
Thêm chú thích JSON được lưu trữ vào hình ảnh
Trong ví dụ trước, chúng tôi đã chỉ cách tích hợp thư viện Annotorious với trang web và vẽ chú thích thủ công trên hình ảnh. Tuy nhiên, cũng có thể lưu trữ các chú thích được xác định trước trong tệp JSON bao gồm vị trí của chúng, tải dữ liệu chú thích từ tệp JSON bằng phương thức loadAnnotations rồi tự động thêm các chú thích đó vào hình ảnh.
Lưu ý: Annotorious tuân thủ Mô hình dữ liệu chú thích web W3C và Đặc tả phân đoạn phương tiện W3C để thêm chú thích vào các phần hoặc phân đoạn cụ thể của tài nguyên phương tiện. Vì vậy, nên sử dụng cấu trúc tệp JSON tương thích.
Dưới đây là tệp annotations.json mẫu được sử dụng để tự động thêm chú thích vào hình ảnh:
Mã trên tải dữ liệu chú thích từ tệp annotations.json và tự động thêm chúng vào hình ảnh. Ví dụ, hãy kiểm tra ảnh chụp màn hình bên dưới:
Bản demo trực tuyến
Bạn cũng có thể thử hai ví dụ trên trực tuyến bằng cách kiểm tra Bản demo chú thích hình ảnh và Bản demo chú thích hình ảnh dựa trên JSON để hiểu rõ hơn về thư viện JavaScript Annotorious.
Phần kết luận
Annotorious là mã nguồn mở và là một thư viện JavaScript chú thích tuyệt vời: tuy nhiên, nó chỉ hỗ trợ thêm chú thích vào hình ảnh. Hơn nữa, cũng có một số lượng hạn chế các hình dạng có thể được sử dụng cho chú thích.
