Perpustakaan Annotorious untuk Anotasi Gambar JavaScript

Apa itu Annotorious?

Annotorious adalah pustaka anotasi gambar sumber terbuka yang ditulis dalam JavaScript yang memungkinkan penambahan anotasi pada gambar di dalam browser dengan menggambar bentuk pada posisi gambar yang diinginkan. Setiap kali suatu bentuk digambar untuk anotasi, itu juga membuka popup untuk menambahkan komentar dan bahkan memberi label anotasi dengan menambahkan tag. Perpustakaan juga mendukung penambahan balasan ke anotasi yang ada dan juga menghapusnya, jika diperlukan.

Beberapa fitur yang didukung oleh perpustakaan Annotorious tercantum di bawah ini:

• Menggambar Bentuk: Annotorious memungkinkan pengguna menggambar bentuk seperti persegi panjang, lingkaran, elips, dan anotasi tangan pada gambar.
• Komentar & Catatan: Pengguna dapat menambahkan komentar dan catatan khusus ke bagian tertentu pada gambar menggunakan Annotorious.
• Pelabelan atau Pemberian Tag: Annotorious mendukung kemampuan untuk menambahkan label atau tag untuk memberi anotasi pada area atau objek berbeda dalam gambar.
• Integrasi: Annotorious dapat dengan mudah diintegrasikan ke dalam laman web dan situs web, memungkinkan fungsi anotasi yang lancar.
• Penyesuaian: Pustaka menyediakan opsi untuk menyesuaikan tampilan dan perilaku anotasi agar sesuai dengan kebutuhan Anda.
• Kompatibilitas: Annotorious bekerja dengan baik dengan berbagai browser web dan platform, menjadikannya serbaguna untuk lingkungan yang berbeda.

Statistik GitHub

Nama:
Bahasa:
Bintang:
Garpu:
Lisensi:
Repositori terakhir diperbarui pada

Memulai dengan Annotorious

Ada tiga cara untuk mendapatkan Annotorious dan mulai menggunakannya dalam proyek web Anda.

1. Instal menggunakan NPM

Setelah Anda menginstal Node.js, jalankan perintah di bawah ini:

npm install @recogito/annotorious

2. Gunakan perpustakaan yang dihosting melalui CDN

Annotorious juga dihosting di server CDN gratis dan Anda dapat menggunakan URL seperti di bawah ini:

• 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. Gunakan rilis yang sudah dibuat sebelumnya

Unduh rilis terbaru Annotorious yang telah dibuat sebelumnya dari GitHub. Setelah Anda mengekstrak rilis zip, Anda akan melihat file di bawah ini (di mana annotorious.min.css dan annotorious.min.js akan digunakan di situs web untuk anotasi gambar):

• annotorious.min.css
• annotorious.min.js
• annotorious.umd.js.map
• recogito-polyfills.js

Tambahkan Anotasi ke Gambar

Jika kami mengunduh rilis bawaan, kami mendapatkan file annotorious.min.css dan annotorious.min.js yang dapat dihubungkan dengan situs web di tag head untuk mengintegrasikan Annotorious perpustakaan JavaScript. Setelah pustaka anotasi gambar terintegrasi, kita dapat menambahkan gambar yang harus ditambahkan anotasi dan terakhir kita dapat menulis kode JavaScript untuk menginisialisasi pustaka Annotorious untuk menambahkan anotasi ke gambar.

Kode di atas hanya menampilkan gambar di browser yang siap untuk diberi anotasi. Setelah gambar dan pustaka dimuat di browser, kita dapat ketuk dua kali, tahan dan menyeret pada posisi gambar yang diinginkan untuk menggambar bentuk guna menyorot area yang diperlukan. Setelah bentuk digambar, sebuah popup terbuka yang memungkinkan Anda menambahkan komentar dan bahkan memberi label/tag pada komentar terkait. Misalnya, periksa tangkapan layar di bawah ini:

Tambahkan Anotasi Tersimpan JSON ke Gambar

Pada contoh sebelumnya, kami menunjukkan cara mengintegrasikan perpustakaan Annotorious dengan halaman web dan menggambar anotasi secara manual pada gambar. Namun, Anda juga dapat menyimpan anotasi yang telah ditentukan sebelumnya dalam file JSON termasuk posisinya, memuat data anotasi dari file JSON menggunakan metode loadAnnotations, lalu secara otomatis menambahkan anotasi tersebut ke gambar.

Catatan: Annotorious mematuhi Model Data Anotasi Web W3C dan Spesifikasi Fragmen Media W3C untuk menambahkan anotasi pada bagian atau fragmen tertentu dari sumber daya media. Jadi, struktur file JSON yang kompatibel harus digunakan.

Di bawah ini contoh file annotations.json yang digunakan untuk menambahkan anotasi ke gambar secara otomatis:

Kode di atas memuat data anotasi dari file annotations.json dan menambahkannya ke gambar secara otomatis. Misalnya, periksa tangkapan layar di bawah ini:

Demo Daring

Anda juga dapat mencoba dua contoh di atas secara online dengan memeriksa target Demo Anotasi Gambar dan Demo Anotasi Gambar berbasis JSON untuk pemahaman yang lebih baik tentang pustaka JavaScript Annotorious.

Kesimpulan

Annotorious adalah pustaka JavaScript sumber terbuka dan anotasi yang bagus: namun, ini hanya mendukung penambahan anotasi ke gambar. Selain itu, jumlah bentuk yang dapat digunakan untuk anotasi juga terbatas.

Produk Sejenis