Perpustakaan Anotorius untuk Anotasi Imej JavaScript

Apa itu Anotorius?

Anotorius ialah perpustakaan anotasi imej sumber terbuka yang ditulis dalam JavaScript yang membenarkan penambahan anotasi pada imej dalam penyemak imbas dengan melukis bentuk pada kedudukan imej yang dikehendaki. Setiap kali bentuk dilukis untuk anotasi, ia turut membuka tetingkap timbul untuk menambah ulasan dan juga melabelkan anotasi dengan menambahkan teg. Pustaka juga menyokong penambahan balasan pada anotasi sedia ada dan juga memadamkannya, jika perlu.

Beberapa ciri yang disokong oleh perpustakaan Anotorius disenaraikan di bawah:

• Lukis Bentuk: Anotorius membolehkan pengguna melukis bentuk seperti segi empat tepat, bulatan, elips dan anotasi tangan bebas pada imej.
• Ulasan & Nota: Pengguna boleh menambah ulasan dan nota tersuai pada bahagian tertentu imej menggunakan Anotorius.
• Pelabelan atau Pengetegan: Anotorius menyokong keupayaan untuk menambah label atau teg untuk menganotasi kawasan atau objek yang berbeza dalam imej.
• Integrasi: Anotorius boleh disepadukan dengan mudah ke dalam halaman web dan tapak web, membolehkan kefungsian anotasi yang lancar.
• Penyesuaian: Pustaka menyediakan pilihan untuk menyesuaikan penampilan dan kelakuan anotasi agar sesuai dengan keperluan anda.
• Keserasian: Anotorius berfungsi dengan baik dengan pelbagai pelayar web dan platform, menjadikannya serba boleh untuk persekitaran yang berbeza.

Statistik GitHub

nama:
Bahasa:
Bintang:
Garpu:
Lesen:
Repositori dikemas kini terakhir pada

Bermula dengan Annotorious

Terdapat tiga cara untuk mendapatkan Anotorius dan mula menggunakannya dalam projek web anda.

Selepas anda memasang Node.js, jalankan arahan di bawah:

npm install @recogito/annotorious

Annotorious juga dihoskan pada pelayan CDN percuma dan anda boleh menggunakan URL seperti di bawah:

• 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

Muat turun keluaran terbaharu Annotorious pra-bina daripada GitHub. Selepas anda mengekstrak keluaran berzip, anda akan melihat fail di bawah (di mana annotorious.min.css dan annotorious.min.js akan digunakan dalam tapak web untuk anotasi imej):

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

Tambahkan Anotasi pada Imej

Jika kami memuat turun keluaran pra-bina, kami mendapat fail annotorious.min.css dan annotorious.min.js yang boleh dipautkan dengan tapak web dalam teg kepala untuk menyepadukan Annotorious Pustaka JavaScript. Selepas pustaka anotasi imej disepadukan, kita boleh menambah imej yang mana anotasi perlu ditambah dan akhirnya kita boleh menulis kod JavaScript untuk memulakan perpustakaan Anotorius untuk menambahkan anotasi pada imej.

Kod di atas hanya menunjukkan imej dalam penyemak imbas sedia untuk anotasi. Setelah imej dan pustaka dimuatkan dalam penyemak imbas, kami boleh ketik dua kali, tahan dan seret pada kedudukan imej yang diingini untuk melukis bentuk untuk menyerlahkan kawasan yang diperlukan. Sebaik sahaja bentuk dilukis, pop timbul terbuka yang membolehkan anda menambah ulasan dan juga melabelkan/tag komen berkaitan. Sebagai contoh, semak tangkapan skrin di bawah:

Tambahkan Anotasi Tersimpan JSON pada Imej

Dalam contoh sebelumnya, kami menunjukkan cara mengintegrasikan perpustakaan Anotorius dengan halaman web dan melukis anotasi pada imej secara manual. Walau bagaimanapun, anda juga boleh menyimpan anotasi yang dipratakrifkan dalam fail JSON termasuk kedudukannya, memuatkan data anotasi daripada fail JSON menggunakan kaedah loadAnnotations dan kemudian secara automatik menambahkan anotasi tersebut pada imej.

Nota: Anotorius mematuhi Model Data Anotasi Web W3C dan Spesifikasi Fragmen Media W3C untuk menambah anotasi pada bahagian atau serpihan tertentu sumber media. Jadi, struktur fail JSON yang serasi harus digunakan.

Di bawah ialah contoh fail annotations.json yang digunakan untuk menambah anotasi pada imej secara automatik:

Kod di atas memuatkan data anotasi daripada fail annotations.json dan menambahkannya pada imej secara automatik. Sebagai contoh, semak tangkapan skrin di bawah:

Demo Dalam Talian

Anda juga boleh mencuba dua contoh di atas dalam talian dengan menyemak Demo Anotasi Imej dan demo Anotasi Imej berasaskan JSON untuk pemahaman yang lebih baik tentang perpustakaan JavaScript Anotorius.

Kesimpulan

Anotorius ialah sumber terbuka dan pustaka JavaScript anotasi yang hebat: walau bagaimanapun, ia hanya menyokong penambahan anotasi pada imej. Selain itu, terdapat juga bilangan bentuk yang terhad yang boleh digunakan untuk anotasi.

Produk Serupa