Annotoryczna biblioteka adnotacji obrazów JavaScript

Co to jest annotoryczny?

Annotorious to biblioteka adnotacji do obrazów typu open source napisana w języku JavaScript, która umożliwia dodawanie adnotacji do obrazów w przeglądarce poprzez rysowanie kształtów w wybranych pozycjach obrazu. Za każdym razem, gdy rysowany jest kształt do adnotacji, otwiera się również wyskakujące okienko, w którym można dodać komentarze, a nawet oznaczyć adnotację, dodając znaczniki. Biblioteka umożliwia także dodawanie odpowiedzi do istniejących adnotacji, a także ich usuwanie w razie potrzeby.

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

• Rysuj kształty: Annotorious umożliwia użytkownikom rysowanie kształtów, takich jak prostokąty, okręgi, elipsy i odręczne adnotacje na obrazach.
• Komentarze i notatki: użytkownicy mogą dodawać własne komentarze i notatki do określonych części obrazu za pomocą Annotorious.
• Oznaczanie lub oznaczanie: Annotorious umożliwia dodawanie etykiet lub znaczników w celu opisywania różnych obszarów lub obiektów obrazu.
• Integracja: Annotorious można łatwo zintegrować ze stronami internetowymi i witrynami internetowymi, co pozwala na płynną funkcjonalność dodawania adnotacji.
• Dostosowywanie: biblioteka udostępnia opcje dostosowywania wyglądu i zachowania adnotacji do własnych potrzeb.
• Kompatybilność: Annotorious dobrze współpracuje z różnymi przeglądarkami internetowymi i platformami, dzięki czemu jest uniwersalny w różnych środowiskach.

Statystyki GitHuba

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

Pierwsze kroki z Annotorious

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

Po zainstalowaniu Node.js, uruchom poniższe polecenie:

npm install @recogito/annotorious

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

• 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

Pobierz najnowszą wersję Annotorious z GitHub. Po rozpakowaniu spakowanej wersji zobaczysz poniższe pliki (gdzie annotorious.min.css i annotorious.min.js będą użyte w witrynie internetowej do adnotacji obrazu):

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

Dodaj adnotacje do obrazów

Jeśli pobierzemy gotową wersję, otrzymamy pliki annotorious.min.css i annotorious.min.js, które można połączyć z witryną w tagu head w celu integracji Annotorious Biblioteka JavaScriptu. Po zintegrowaniu biblioteki adnotacji do obrazów możemy dodać obraz, na którym należy dodać adnotacje, a na koniec możemy napisać kod JavaScript inicjujący bibliotekę Annotorious w celu dodawania adnotacji do obrazu.

Powyższy kod po prostu pokazuje obraz w przeglądarce gotowy do adnotacji. Po załadowaniu obrazu i biblioteki do przeglądarki możemy dotknąć dwukrotnie, przytrzymać i przeciągnąć w żądanej pozycji obrazu, aby narysować kształt i podświetlić wymagany obszar. Po narysowaniu kształtu otwiera się wyskakujące okienko, które umożliwia dodawanie komentarzy, a nawet komentarzy związanych z etykietami/tagami. Na przykład sprawdź poniższy zrzut ekranu:

Dodaj zapisane adnotacje JSON do obrazów

W poprzednim przykładzie pokazaliśmy, jak zintegrować bibliotekę Annotorious ze stroną internetową i ręcznie narysować adnotacje na obrazie. Możliwe jest jednak również przechowywanie predefiniowanych adnotacji w pliku JSON wraz z ich pozycjami, ładowanie danych adnotacji z pliku JSON metodą loadAnnotations, a następnie automatyczne dodawanie tych adnotacji do obrazu.

Uwaga: Annotorious jest zgodny z Modelem danych adnotacji internetowych W3C i Specyfikacja fragmentów multimediów W3C, aby dodać adnotacje do określonych części lub fragmentów zasobu multimedialnego. Dlatego należy zastosować kompatybilną strukturę plików 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 automatycznie dodaje je do obrazu. Na przykład sprawdź poniższy zrzut ekranu:

Demo internetowe

Możesz także wypróbować powyższe dwa przykłady online, sprawdzając Demonstracja adnotacji obrazu i Demonstrację adnotacji graficznych opartych na formacie JSON w celu lepszego zrozumienia biblioteki JavaScript Annotorious.

Wniosek

Annotorious to open source i świetna biblioteka JavaScript z adnotacjami: obsługuje jednak tylko dodawanie adnotacji do obrazów. Co więcej, istnieje również ograniczona liczba kształtów, które można wykorzystać do adnotacji.

Podobne Produkty