Thư viện Annotorious cho chú thích hình ảnh JavaScript
Thêm hình vẽ, nhận xét và nhãn vào hình ảnh trong trang web bằng thư viện Annotorious trong JavaScript.
Annotious là gì?
Annotorious là thư viện chú thích hình ảnh mã nguồn mở được viết bằng JavaScript, cho phép thêm chú thích trên hình ảnh trong trình duyệt bằng cách vẽ hình trên 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 nhận xét và thậm chí gắn nhãn cho chú thích bằng cách thêm thẻ. Thư viện cũng hỗ trợ thêm câu trả lời cho các chú thích hiện có và cũng có thể 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ê bên dưới:
- Vẽ hình: 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 tự do trên hình ảnh.
- Nhận xét & Ghi chú: Người dùng có thể thêm nhận xét 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 hình ảnh.
- Tích hợp: Annotorious có thể được tích hợp dễ dàng vào các trang web và website, cho phép thực hiện 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à hoạt động của chú thích 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 các 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 nó 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 được 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 dựng sẵn
Tải xuống bản phát hành mới nhất được tạo 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.map
- recogito-polyfills.js
Thêm chú thích vào hình ảnh
Nếu tải xuống bản phát hành dựng sẵn, chúng tôi 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 Annotorious Thư viện JavaScript. Sau khi tích hợp thư viện chú thích hình ảnh, 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 nhằm 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 hai lần, giữ và kéo vào vị trí mong muốn của hình ảnh để vẽ hình nhằm làm nổi bật khu vực 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 nhận xét và thậm chí cả các nhận xét liên quan đến nhãn/thẻ. Ví dụ: kiểm tra ảnh chụp màn hình bên dưới:
Thêm chú thích được lưu trữ JSON vào hình ảnh
Trong ví dụ trước, chúng tôi đã trình bày cách tích hợp thư viện Annotorious với trang web và vẽ chú thích trên hình ảnh theo cách thủ công. 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 cả 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 và sau đó 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ả mảnh phương tiện W3C để thêm chú thích vào các phần hoặc đ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 chú thích.json và tự động thêm chúng vào hình ảnh. Ví dụ: kiểm tra ảnh chụp màn hình bên dưới:
Bản trình diễn trực tuyến
Bạn cũng có thể thử trực tuyến hai ví dụ trên bằng cách kiểm tra mục tiêu 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à 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, số lượng hình dạng có thể được sử dụng cho chú thích cũng bị hạn chế.
