Pustaka 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 bentuk digambar untuk anotasi, ia juga membuka jendela pop-up untuk menambahkan komentar dan bahkan memberi label pada anotasi dengan menambahkan tag. Pustaka ini juga mendukung penambahan balasan ke anotasi yang ada dan juga menghapusnya, jika diperlukan.

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

• Menggambar Bentuk: Annotorious memungkinkan pengguna untuk menggambar bentuk seperti persegi panjang, lingkaran, elips, dan anotasi tangan bebas pada gambar.
• Komentar & Catatan: Pengguna dapat menambahkan komentar dan catatan khusus ke bagian tertentu dari suatu gambar menggunakan Annotorious.
• Pelabelan atau Penandaan: Annotorious mendukung kemampuan untuk menambahkan label atau tag guna memberi anotasi pada area atau objek berbeda dalam sebuah gambar.
• Integrasi: Annotorious dapat dengan mudah diintegrasikan ke dalam halaman web dan situs web, memungkinkan fungsionalitas anotasi yang lancar.
• Kustomisasi: Pustaka menyediakan opsi untuk menyesuaikan tampilan dan perilaku anotasi agar sesuai dengan kebutuhan Anda.
• Kompatibilitas: Annotorious bekerja dengan baik dengan berbagai peramban web dan platform, membuatnya 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:

• Bahasa Indonesia: 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 mengekstrak rilis yang di-zip, Anda akan melihat file-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
• peta.umd.js.annotorious
• recogito-polyfills.js

Tambahkan Anotasi ke Gambar

Jika kita mengunduh rilis yang sudah dibuat sebelumnya, kita akan mendapatkan file annotorious.min.css dan annotorious.min.js yang dapat ditautkan dengan situs web di tag head untuk mengintegrasikan pustaka JavaScript Annotorious. Setelah pustaka anotasi gambar terintegrasi, kita dapat menambahkan gambar yang harus diberi anotasi dan akhirnya kita dapat menulis kode JavaScript untuk menginisialisasi pustaka Annotorious guna 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 mengetuk dua kali, menahan, dan menyeret pada posisi gambar yang diinginkan untuk menggambar bentuk guna menyorot area yang diperlukan. Setelah bentuk digambar, jendela pop-up akan terbuka yang memungkinkan Anda menambahkan komentar dan bahkan memberi label/tag pada komentar terkait. Misalnya, lihat tangkapan layar di bawah ini:

Tambahkan Anotasi Tersimpan JSON ke Gambar

Pada contoh sebelumnya, kami menunjukkan cara mengintegrasikan pustaka Annotorious dengan halaman web dan menggambar anotasi pada gambar secara manual. Namun, anotasi yang telah ditetapkan sebelumnya juga dapat disimpan 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 adalah contoh file annotations.json yang digunakan untuk menambahkan anotasi secara otomatis ke gambar:

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

Demo Daring

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

Kesimpulan

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

Produk Sejenis