Annotorious-Bibliothek für JavaScript-Bildanmerkungen
Fügen Sie mit der Annotorious-Bibliothek in JavaScript Zeichnungen, Kommentare und Beschriftungen zu Bildern auf Webseiten hinzu.
Was ist Annotorious?
Annotorious ist eine in JavaScript geschriebene Open-Source-Bibliothek für Bildanmerkungen, die das Hinzufügen von Anmerkungen zu Bildern im Browser ermöglicht, indem Formen an den gewünschten Stellen des Bildes gezeichnet werden. Immer wenn eine Form zur Anmerkung gezeichnet wird, öffnet sich auch ein Popup, um Kommentare hinzuzufügen und die Anmerkung sogar durch Hinzufügen von Tags zu kennzeichnen. Die Bibliothek unterstützt auch das Hinzufügen von Antworten auf vorhandene Anmerkungen und deren Löschen, falls erforderlich.
Einige der von der Annotorious-Bibliothek unterstützten Funktionen sind unten aufgeführt:
- Formen zeichnen: Annotorious ermöglicht es Benutzern, Formen wie Rechtecke, Kreise, Ellipsen und Freihandanmerkungen auf Bildern zu zeichnen.
- Kommentare und Notizen: Benutzer können mit Annotorious benutzerdefinierte Kommentare und Notizen zu bestimmten Teilen eines Bildes hinzufügen.
- Beschriften oder Taggen: Annotorious unterstützt die Möglichkeit, Beschriftungen oder Tags hinzuzufügen, um verschiedene Bereiche oder Objekte innerhalb eines Bildes mit Anmerkungen zu versehen.
- Integration: Annotorious kann problemlos in Webseiten und Websites integriert werden und ermöglicht so eine nahtlose Anmerkungsfunktionalität.
- Anpassung: Die Bibliothek bietet Optionen zum Anpassen des Erscheinungsbilds und Verhaltens von Anmerkungen entsprechend Ihren Anforderungen.
- Kompatibilität: Annotorious funktioniert gut mit verschiedenen Webbrowsern und Plattformen und ist daher vielseitig für unterschiedliche Umgebungen geeignet.
Erste Schritte mit Annotorious
Es gibt drei Möglichkeiten, Annotorious zu erhalten und in Ihren Webprojekten zu verwenden.
1. Installation mit NPM
Nachdem Sie Node.js installiert haben, führen Sie den folgenden Befehl aus:
Installieren Sie Annotorious mit NPM
npm install @recogito/annotorious
2. Gehostete Bibliothek über CDN nutzen
Annotorious wird auch auf einem kostenlosen CDN-Server gehostet und Sie können URLs wie die folgenden verwenden:
- 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. Vorgefertigte Releases verwenden
Laden Sie eine vorgefertigte neueste Version von Annotorious von GitHub herunter. Nachdem Sie die komprimierte Version extrahiert haben, sehen Sie die folgenden Dateien (wobei annotorious.min.css und annotorious.min.js auf der Website zur Bildannotation verwendet werden):
- annotorious.min.css
- annotorious.min.js
- annotorious.umd.js.map
- recogito-polyfills.js
Hinzufügen von Anmerkungen zu Bildern
Wenn wir eine vorgefertigte Version herunterladen, erhalten wir die Dateien annotorious.min.css und annotorious.min.js, die im Head-Tag mit der Website verknüpft werden können, um die JavaScript-Bibliothek Annotorious zu integrieren. Nachdem die Bildanmerkungsbibliothek integriert ist, können wir ein Bild hinzufügen, dem Anmerkungen hinzugefügt werden müssen, und schließlich können wir JavaScript-Code schreiben, um die Annotorious-Bibliothek zu initialisieren und Anmerkungen zum Bild hinzuzufügen.
Der obige Code zeigt einfach ein Bild im Browser, das für Anmerkungen bereit ist. Sobald Bild und Bibliothek im Browser geladen sind, können wir an der gewünschten Stelle des Bildes doppelt tippen, halten und ziehen, um eine Form zu zeichnen und den gewünschten Bereich hervorzuheben. Sobald die Form gezeichnet ist, öffnet sich ein Popup, in dem Sie Kommentare hinzufügen und sogar verwandte Kommentare beschriften/markieren können. Sehen Sie sich beispielsweise den folgenden Screenshot an:
Hinzufügen gespeicherter JSON-Anmerkungen zu Bildern
Im vorherigen Beispiel haben wir gezeigt, wie man die Annotorious-Bibliothek in die Webseite integriert und manuell Anmerkungen auf das Bild zeichnet. Es ist jedoch auch möglich, vordefinierte Anmerkungen einschließlich ihrer Positionen in einer JSON-Datei zu speichern, Anmerkungsdaten mit der Methode loadAnnotations aus der JSON-Datei zu laden und diese Anmerkungen dann automatisch zum Bild hinzuzufügen.
Hinweis: Annotorious entspricht dem W3C Web Annotation Data Model und der W3C Media Fragments Specification, um Anmerkungen zu bestimmten Teilen oder Fragmenten einer Medienressource hinzuzufügen. Daher sollte eine kompatible JSON-Dateistruktur verwendet werden.
Unten sehen Sie die Beispieldatei annotations.json, die zum automatischen Hinzufügen von Anmerkungen zum Bild verwendet wird:
Der obige Code lädt Anmerkungsdaten aus der Datei annotations.json und fügt sie automatisch dem Bild hinzu. Sehen Sie sich beispielsweise den folgenden Screenshot an:
Online Demo
Sie können die beiden oben genannten Beispiele auch online ausprobieren, indem Sie sich die Demo zur Bildanmerkung und die Demo zur JSON-basierten Bildanmerkung ansehen, um die Annotorious JavaScript-Bibliothek besser zu verstehen.
Abschluss
Annotorious ist Open Source und eine großartige JavaScript-Bibliothek für Anmerkungen. Allerdings unterstützt sie nur das Hinzufügen von Anmerkungen zu Bildern. Darüber hinaus gibt es auch eine begrenzte Anzahl von Formen, die für Anmerkungen verwendet werden können.