Annotorious Library for JavaScript Image Annotations

Τι είναι το Annotorious;

Το Annotorious είναι μια βιβλιοθήκη σχολιασμών εικόνων ανοιχτού κώδικα γραμμένη σε JavaScript που επιτρέπει την προσθήκη σχολιασμών σε εικόνες μέσα στο πρόγραμμα περιήγησης σχεδιάζοντας σχήματα στις επιθυμητές θέσεις της εικόνας. Κάθε φορά που σχεδιάζεται ένα σχήμα για σχολιασμό, ανοίγει επίσης ένα αναδυόμενο παράθυρο για να προσθέσετε σχόλια και ακόμη και να προσθέσετε ετικέτες στον σχολιασμό προσθέτοντας ετικέτες. Η Βιβλιοθήκη υποστηρίζει επίσης την προσθήκη απαντήσεων σε υπάρχοντες σχολιασμούς και τη διαγραφή τους, εάν απαιτείται.

Μερικές από τις δυνατότητες που υποστηρίζονται από τη βιβλιοθήκη Annotorious παρατίθενται παρακάτω:

• Σχεδίαση σχημάτων: Το Annotorious επιτρέπει στους χρήστες να σχεδιάζουν σχήματα όπως ορθογώνια, κύκλους, ελλείψεις και σχολιασμούς με ελεύθερο χέρι σε εικόνες.
• Σχόλια και σημειώσεις: Οι χρήστες μπορούν να προσθέτουν προσαρμοσμένα σχόλια και σημειώσεις σε συγκεκριμένα μέρη μιας εικόνας χρησιμοποιώντας το Annotorious.
• Ετικέτα ή προσθήκη ετικετών: Το Annotorious υποστηρίζει τη δυνατότητα προσθήκης ετικετών ή ετικετών για τον σχολιασμό διαφορετικών περιοχών ή αντικειμένων σε μια εικόνα.
• Ενσωμάτωση: Το Annotorious μπορεί εύκολα να ενσωματωθεί σε ιστοσελίδες και ιστότοπους, επιτρέποντας την απρόσκοπτη λειτουργία σχολιασμού.
• Προσαρμογή: Η βιβλιοθήκη παρέχει επιλογές για την προσαρμογή της εμφάνισης και της συμπεριφοράς των σχολιασμών ανάλογα με τις ανάγκες σας.
• Συμβατότητα: Το Annotorious λειτουργεί καλά με διάφορα προγράμματα περιήγησης ιστού και πλατφόρμες, καθιστώντας το ευέλικτο για διαφορετικά περιβάλλοντα.

Στατιστικά GitHub

Ονομα:
Γλώσσα:
Αστέρια:
Πιρούνια:
Αδεια:
Το αποθετήριο ενημερώθηκε τελευταία φορά στις

Ξεκινώντας με το Annotorious

Υπάρχουν τρεις τρόποι για να αποκτήσετε το Annotorious και να αρχίσετε να το χρησιμοποιείτε στα έργα σας στον ιστό.

1. Εγκαταστήστε χρησιμοποιώντας NPM

Αφού εγκαταστήσετε το Node.js, εκτελέστε την παρακάτω εντολή:

npm install @recogito/annotorious

2. Χρησιμοποιήστε τη φιλοξενούμενη βιβλιοθήκη μέσω CDN

Το Annotorious φιλοξενείται επίσης σε δωρεάν διακομιστή CDN και μπορείτε να χρησιμοποιήσετε διευθύνσεις URL όπως παρακάτω:

• 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. Χρησιμοποιήστε προ-ενσωματωμένη απελευθέρωση

Κατεβάστε μια προκατασκευασμένη τελευταία έκδοση του Annotorious από το GitHub. Αφού εξαγάγετε τη συμπιεσμένη έκδοση, θα δείτε παρακάτω αρχεία (όπου τα annotorious.min.css και annotorious.min.js θα χρησιμοποιηθούν στον ιστότοπο για σχολιασμό εικόνας):

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

Προσθέστε σχολιασμούς στις εικόνες

Εάν κατεβάσουμε μια προκατασκευασμένη έκδοση, λαμβάνουμε αρχεία annotorious.min.css και annotorious.min.js τα οποία μπορούν να συνδεθούν με τον ιστότοπο στην ετικέτα κεφαλιού για την ενσωμάτωση του Annotorious Βιβλιοθήκη JavaScript. Αφού ενσωματωθεί η βιβλιοθήκη σχολιασμών εικόνων, μπορούμε να προσθέσουμε μια εικόνα στην οποία πρέπει να προστεθούν σχολιασμοί και τέλος μπορούμε να γράψουμε κώδικα JavaScript για να αρχικοποιήσουμε τη βιβλιοθήκη Annotorious για την προσθήκη σχολιασμών στην εικόνα.

Ο παραπάνω κώδικας δείχνει απλώς μια εικόνα στο πρόγραμμα περιήγησης έτοιμη για σχολιασμούς. Μόλις φορτωθεί η εικόνα και η βιβλιοθήκη στο πρόγραμμα περιήγησης, μπορούμε να πατήσουμε δύο φορές, κρατάμε και σύρουμε στην επιθυμητή θέση της εικόνας για να σχεδιάσουμε ένα σχήμα προκειμένου να τονίσουμε την απαιτούμενη περιοχή. Μόλις σχεδιαστεί το σχήμα, ανοίγει ένα αναδυόμενο παράθυρο που σας επιτρέπει να προσθέτετε σχόλια και ακόμη και να προσθέτετε ετικέτα/ετικέτα σχετικά με σχόλια. Για παράδειγμα, ελέγξτε το παρακάτω στιγμιότυπο οθόνης:

Προσθέστε αποθηκευμένους σχολιασμούς JSON στις εικόνες

Στο προηγούμενο παράδειγμα, δείξαμε πώς να ενσωματώσετε τη βιβλιοθήκη Annotorious με την ιστοσελίδα και να σχεδιάσετε με μη αυτόματο τρόπο σχολιασμούς στην εικόνα. Ωστόσο, είναι επίσης δυνατό να αποθηκεύσετε προκαθορισμένους σχολιασμούς σε ένα αρχείο JSON, συμπεριλαμβανομένων των θέσεων τους, να φορτώσετε δεδομένα σχολιασμών από το αρχείο JSON χρησιμοποιώντας τη μέθοδο loadAnnotations και στη συνέχεια να προσθέσετε αυτόματα αυτούς τους σχολιασμούς στην εικόνα.

Σημείωση: Το Annotorious συμμορφώνεται με το Μοντέλο δεδομένων σχολιασμού ιστού W3C και το Προδιαγραφές τμημάτων πολυμέσων W3C για να προσθέσετε σχολιασμούς σε συγκεκριμένα τμήματα ή τμήματα ενός πόρου πολυμέσων. Επομένως, θα πρέπει να χρησιμοποιείται συμβατή δομή αρχείου JSON.

Ακολουθεί το δείγμα αρχείου annotations.json που χρησιμοποιείται για την αυτόματη προσθήκη σχολιασμών στην εικόνα:

Ο παραπάνω κώδικας φορτώνει δεδομένα σχολιασμών από το αρχείο annotations.json και τα προσθέτει αυτόματα στην εικόνα. Για παράδειγμα, ελέγξτε το παρακάτω στιγμιότυπο οθόνης:

Online επίδειξη

Μπορείτε επίσης να δοκιμάσετε τα παραπάνω δύο παραδείγματα στο διαδίκτυο ελέγχοντας τον στόχο Επίδειξη σχολιασμού εικόνας και επίδειξης σχολιασμών εικόνας βάσει JSON για καλύτερη κατανόηση της βιβλιοθήκης Annotorious JavaScript.

συμπέρασμα

Το Annotorious είναι ανοιχτού κώδικα και μια εξαιρετική βιβλιοθήκη JavaScript σχολιασμών: ωστόσο, υποστηρίζει μόνο την προσθήκη σχολιασμών σε εικόνες. Επιπλέον, υπάρχει επίσης περιορισμένος αριθμός σχημάτων που μπορούν να χρησιμοποιηθούν για σχολιασμούς.

Παρόμοια Προϊόντα