Knihovna poznámek pro anotace obrázků v JavaScriptu

Co je Anotorious?

Annotorious je open source knihovna anotací obrázků napsaná v JavaScriptu, která umožňuje přidávat anotace k obrázkům v prohlížeči kreslením tvarů na požadované pozice obrázku. Kdykoli je tvar nakreslen pro anotaci, otevře se také vyskakovací okno pro přidání komentářů a dokonce i označení anotace přidáním tagů. Knihovna také podporuje přidávání odpovědí na existující anotace a v případě potřeby je také maže.

Některé z funkcí podporovaných knihovnou Annotorious jsou uvedeny níže:

• Kreslení tvarů: Anotorious umožňuje uživatelům kreslit na obrázky tvary, jako jsou obdélníky, kruhy, elipsy a poznámky od ruky.
• Komentáře a poznámky: Uživatelé mohou přidávat vlastní komentáře a poznámky ke konkrétním částem obrázku pomocí funkce Anotorious.
• Označování štítky nebo štítky: Anotorious podporuje možnost přidávat štítky nebo štítky k anotaci různých oblastí nebo objektů v rámci obrázku.
• Integrace: Anotorious lze snadno integrovat do webových stránek a webů, což umožňuje bezproblémovou funkci anotací.
• Přizpůsobení: Knihovna poskytuje možnosti pro přizpůsobení vzhledu a chování anotací tak, aby vyhovovaly vašim potřebám.
• Kompatibilita: Anotorious funguje dobře s různými webovými prohlížeči a platformami, takže je univerzální pro různá prostředí.

Statistiky GitHubu

Název:
Jazyk:
hvězdy:
Vidlice:
Licence:
Úložiště bylo naposledy aktualizováno v

Začínáme s Annotorious

Existují tři způsoby, jak získat Annotorious a začít jej používat ve svých webových projektech.

1. Nainstalujte pomocí NPM

Po instalaci Node.js spusťte níže uvedený příkaz:

npm install @recogito/annotorious

2. Použijte hostovanou knihovnu přes CDN

Annotorious je také hostován na bezplatném CDN serveru a můžete použít adresy URL jako níže:

• 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. Použijte předpřipravenou verzi

Stáhněte si předpřipravenou nejnovější verzi Annotorious z GitHubu. Po rozbalení zazipované verze uvidíte níže uvedené soubory (kde se na webu pro anotaci obrázku použijí annotorious.min.css a annotorious.min.js):

• anotorious.min.css
• anotorious.min.js
• annotorious.umd.js.map
• regogito-polyfills.js

Přidání poznámek k obrázkům

Pokud si stáhneme předpřipravenou verzi, získáme soubory annotorious.min.css a annotorious.min.js, které lze propojit s webem v tagu head a integrovat tak Annotorious JavaScript knihovna. Po integraci knihovny anotací obrázků můžeme přidat obrázek, na který je třeba přidat anotace, a nakonec můžeme napsat JavaScript kód pro inicializaci knihovny Annotorious pro přidávání anotací do obrázku.

Výše uvedený kód jednoduše zobrazuje obrázek v prohlížeči připravený pro poznámky. Po načtení obrázku a knihovny v prohlížeči můžeme dvojitým klepnutím, podržením a přetažením na požadovanou pozici obrázku nakreslit tvar, abychom zvýraznili požadovanou oblast. Jakmile je tvar nakreslen, otevře se vyskakovací okno, které vám umožní přidávat komentáře a dokonce také označovat/označovat související komentáře. Podívejte se například na níže uvedený snímek obrazovky:

Přidejte k obrázkům uložené poznámky JSON

V předchozím příkladu jsme si ukázali, jak integrovat knihovnu Annotorious s webovou stránkou a ručně kreslit anotace na obrázek. Je však také možné uložit předdefinované anotace do souboru JSON včetně jejich pozic, načíst data anotací ze souboru JSON pomocí metody loadAnnotations a poté tyto anotace automaticky přidat do obrázku.

Poznámka: Anotorious vyhovuje Datovému modelu webové anotace W3C a Specifikace mediálních fragmentů W3C pro přidání poznámek ke konkrétním částem nebo fragmentům mediálního zdroje. Měla by se tedy používat kompatibilní struktura souborů JSON.

Níže je ukázkový soubor annotations.json, který se používá k automatickému přidávání anotací k obrázku:

Výše uvedený kód načte data anotací ze souboru annotations.json a automaticky je přidá do obrázku. Podívejte se například na níže uvedený snímek obrazovky:

Online demo

Výše uvedené dva příklady můžete také vyzkoušet online zaškrtnutím cíle Ukázka poznámky k obrázku a ukázkové anotace založené na JSON pro lepší pochopení knihovny Anotorious JavaScript.

Závěr

Annotorious je open source a skvělá knihovna JavaScriptu pro anotace: podporuje však pouze přidávání anotací k obrázkům. Kromě toho existuje také omezený počet tvarů, které lze použít pro poznámky.

Podobné Produkty