1. Produkty
  2.   Adnotacja
  3.   JavaScript
  4.   Annotorious
 
  

Biblioteka Annotorious do adnotacji obrazów JavaScript

Dodawaj rysunki, komentarze i etykiety do obrazów na stronach internetowych, korzystając z biblioteki Annotorious w JavaScript.

Czym jest Annotorious?

Annotorious to biblioteka adnotacji obrazów typu open source napisana w JavaScript, która umożliwia dodawanie adnotacji do obrazów w przeglądarce poprzez rysowanie kształtów w żądanych pozycjach obrazu. Za każdym razem, gdy kształt jest rysowany do adnotacji, otwiera się również okno podręczne, aby dodać komentarze, a nawet oznaczyć adnotację, dodając tagi. Biblioteka obsługuje również dodawanie odpowiedzi do istniejących adnotacji, a także ich usuwanie, jeśli jest to wymagane.

Poniżej wymieniono niektóre funkcje obsługiwane przez bibliotekę Annotorious:

  • Rysowanie kształtów: Annotorious umożliwia użytkownikom rysowanie kształtów, takich jak prostokąty, okręgi i elipsy, a także wykonywanie odręcznych adnotacji na obrazach.
  • Komentarze i notatki: Użytkownicy mogą dodawać własne komentarze i notatki do określonych części obrazu za pomocą Annotorious.
  • Etykietowanie lub tagowanie: Annotorious umożliwia dodawanie etykiet lub tagów w celu adnotacji różnych obszarów lub obiektów w obrazie.
  • Integracja: Annotorious można łatwo zintegrować ze stronami internetowymi i witrynami internetowymi, co pozwala na bezproblemową funkcjonalność adnotacji.
  • Personalizacja: Biblioteka udostępnia opcje umożliwiające dostosowanie wyglądu i zachowania adnotacji do własnych potrzeb.
  • Zgodność: Annotorious dobrze współpracuje z różnymi przeglądarkami internetowymi i platformami, dzięki czemu jest wszechstronny w różnych środowiskach.
GitHub

Statystyki GitHuba

Nazwa:
Język:
Gwiazdy:
Widły:
Licencja:
Repozytorium zostało ostatnio zaktualizowane o godzinie

Pierwsze kroki z Annotorious

Istnieją trzy sposoby, aby pobrać Annotorious i zacząć używać go w swoich projektach internetowych.

1. Zainstaluj za pomocą NPM

Po zainstalowaniu Node.js uruchom poniższe polecenie:

Zainstaluj Annotorious za pomocą NPM


npm install @recogito/annotorious

2. Użyj biblioteki hostowanej za pośrednictwem CDN

Annotorious jest również hostowany na darmowym serwerze CDN i możesz używać adresów URL takich jak poniżej:

3. Użyj wstępnie skompilowanej wersji

Pobierz najnowszą wersję Annotorious z GitHub. Po rozpakowaniu spakowanej wersji zobaczysz poniższe pliki (gdzie annotorious.min.css i annotorious.min.js zostaną użyte na stronie internetowej do adnotacji obrazów):

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

Dodawanie adnotacji do obrazów

Jeśli pobierzemy wstępnie skompilowaną wersję, otrzymamy pliki annotorious.min.css i annotorious.min.js, które można połączyć ze stroną internetową w znaczniku head, aby zintegrować bibliotekę JavaScript Annotorious. Po zintegrowaniu biblioteki adnotacji obrazów możemy dodać obraz, do którego należy dodać adnotacje, a na koniec możemy napisać kod JavaScript, aby zainicjować bibliotekę Annotorious w celu dodania adnotacji do obrazu.

Powyższy kod po prostu pokazuje obraz w przeglądarce gotowy do adnotacji. Gdy obraz i biblioteka zostaną załadowane w przeglądarce, możemy dwukrotnie stuknąć, przytrzymać i przeciągnąć w żądanej pozycji obrazu, aby narysować kształt w celu podświetlenia wymaganego obszaru. Gdy kształt zostanie narysowany, otwiera się okno podręczne, które umożliwia dodawanie komentarzy, a nawet etykietowanie/oznaczanie komentarzy. Na przykład sprawdź poniższy zrzut ekranu:

Dodaj adnotacje do obrazu

Dodaj adnotacje zapisane w formacie JSON do obrazów

W poprzednim przykładzie pokazaliśmy, jak zintegrować bibliotekę Annotorious ze stroną internetową i ręcznie rysować adnotacje na obrazie. Jednak możliwe jest również przechowywanie wstępnie zdefiniowanych adnotacji w pliku JSON, w tym ich pozycji, ładowanie danych adnotacji z pliku JSON za pomocą metody loadAnnotations, a następnie automatyczne dodawanie tych adnotacji do obrazu.

Uwaga: Annotorious jest zgodny z modelem danych adnotacji internetowych W3C i specyfikacją fragmentów mediów W3C, aby dodawać adnotacje do określonych części lub fragmentów zasobu multimedialnego. Dlatego należy używać zgodnej struktury pliku JSON.

Poniżej znajduje się przykładowy plik annotations.json, który służy do automatycznego dodawania adnotacji do obrazu:

Powyższy kod ładuje dane adnotacji z pliku annotations.json i dodaje je do obrazu automatycznie. Na przykład sprawdź poniższy zrzut ekranu:

Dodaj adnotacje zapisane w formacie JSON do obrazu

Demo online

Możesz również wypróbować powyższe dwa przykłady online, sprawdzając Demo adnotacji obrazów i Demo adnotacji obrazów w formacie JSON, aby lepiej zrozumieć bibliotekę JavaScript Annotorious.

Wniosek

Annotorious jest open source i świetną biblioteką JavaScript do adnotacji: jednak obsługuje tylko dodawanie adnotacji do obrazów. Ponadto istnieje również ograniczona liczba kształtów, których można używać do adnotacji.

Podobne Produkty

 Polish