Annotorious-Bibliothek für JavaScript-Bildanmerkungen

Was ist Annotorious?

Annotorious ist eine in JavaScript geschriebene Open-Source-Bildanmerkungsbibliothek, die das Hinzufügen von Anmerkungen zu Bildern im Browser durch das Zeichnen von Formen an gewünschten Positionen des Bildes ermöglicht. Immer wenn eine Form zur Anmerkung gezeichnet wird, wird auch ein Popup geöffnet, in dem Sie Kommentare hinzufügen und die Anmerkung sogar mit Tags versehen können. Die Bibliothek unterstützt auch das Hinzufügen von Antworten zu vorhandenen Anmerkungen und deren Löschung bei Bedarf.

Einige der von der Annotorious-Bibliothek unterstützten Funktionen sind unten aufgeführt:

• Formen zeichnen: Mit Annotorious können Benutzer Formen wie Rechtecke, Kreise, Ellipsen und Freihandanmerkungen auf Bildern zeichnen.
• Kommentare und Notizen: Benutzer können mit Annotorious benutzerdefinierte Kommentare und Notizen zu bestimmten Teilen eines Bildes hinzufügen.
• Beschriften oder Markieren: 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 an Ihre Bedürfnisse.
• Kompatibilität: Annotorious funktioniert gut mit verschiedenen Webbrowsern und Plattformen und ist daher vielseitig für verschiedene Umgebungen geeignet.

GitHub-Statistiken

Name:
Sprache:
Sterne:
Gabeln:
Lizenz:
Das Repository wurde zuletzt aktualisiert unter

Erste Schritte mit Annotorious

Es gibt drei Möglichkeiten, Annotorious zu erhalten und es in Ihren Webprojekten zu verwenden.

1. Installation mit NPM

Nachdem Sie Node.js installiert haben, führen Sie den folgenden Befehl aus:

npm install @recogito/annotorious

2. Nutzen Sie die gehostete Bibliothek über CDN

Annotorious wird auch auf dem 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. Verwenden Sie eine vorgefertigte Version

Laden Sie eine vorgefertigte neueste Version von Annotorious von GitHub herunter. Nachdem Sie die gezippte Version entpackt haben, sehen Sie die folgenden Dateien (wobei annotorious.min.css und annotorious.min.js auf der Website für Bildanmerkungen verwendet werden):

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

Fügen Sie Anmerkungen zu Bildern hinzu

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 Annotorious zu integrieren JavaScript-Bibliothek. Nachdem die Bildanmerkungsbibliothek integriert ist, können wir ein Bild hinzufügen, zu dem Anmerkungen hinzugefügt werden müssen, und schließlich können wir JavaScript-Code schreiben, um die Annotorious-Bibliothek zum Hinzufügen von Anmerkungen zum Bild zu initialisieren.

Der obige Code zeigt einfach ein Bild im Browser an, das für Anmerkungen bereit ist. Sobald Bild und Bibliothek im Browser geladen sind, können wir auf die gewünschte Position des Bildes doppelt tippen, halten und ziehen, um eine Form zu zeichnen und den gewünschten Bereich hervorzuheben. Sobald die Form gezeichnet ist, wird ein Popup geöffnet, in dem Sie Kommentare hinzufügen und sogar verwandte Kommentare beschriften/markieren können. Sehen Sie sich zum Beispiel den folgenden Screenshot an:

Fügen Sie gespeicherte JSON-Anmerkungen zu Bildern hinzu

Im vorherigen Beispiel haben wir gezeigt, wie man die Annotorious-Bibliothek in die Webseite integriert und manuell Anmerkungen zum Bild zeichnet. Es ist jedoch auch möglich, vordefinierte Anmerkungen einschließlich ihrer Positionen in einer JSON-Datei zu speichern, Anmerkungsdaten mithilfe der Methode loadAnnotations aus der JSON-Datei zu laden und diese Anmerkungen dann automatisch dem Bild hinzuzufügen.

Hinweis: Annotorious entspricht dem W3C Web Annotation Data Model und W3C Media Fragments Specification, um Anmerkungen zu bestimmten Teilen oder Fragmenten einer Medienressource hinzuzufügen. Daher sollte eine kompatible JSON-Dateistruktur verwendet werden.

Nachfolgend finden 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 zum Beispiel den folgenden Screenshot an:

Online-Demo

Sie können die beiden oben genannten Beispiele auch online ausprobieren, indem Sie sich das Ziel Image Annotation-Demo und JSON-basierter Image Annotations-Demo für ein besseres Verständnis der Annotorious JavaScript-Bibliothek.

Abschluss

Annotorious ist Open Source und eine großartige JavaScript-Bibliothek für Anmerkungen: Sie unterstützt jedoch 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.

Ähnliche Produkte