Jeles könyvtár a JavaScript képannotációihoz
Adjon hozzá rajzokat, megjegyzéseket és címkéket a weboldalakon lévő képekhez a JavaScript Annotorious könyvtárával.
Mi az Annotory?
Az Annotorious egy JavaScriptben írt, nyílt forráskódú képannotációs könyvtár, amely lehetővé teszi megjegyzések hozzáadását a képekhez a böngészőn belül úgy, hogy alakzatokat rajzol a kép kívánt pozícióira. Amikor egy alakzatot annotációhoz rajzol, egy felugró ablakot is megnyílik, ahol megjegyzéseket fűzhet hozzá, és címkék hozzáadásával akár fel is címkézi a kommentárt. A Library azt is támogatja, hogy válaszokat adjon a meglévő megjegyzésekhez, és szükség esetén törölje is azokat.
Az alábbiakban felsorolunk néhány, az Annotorious könyvtár által támogatott funkciót:
- Alakzatok rajzolása: Az Annotorious segítségével a felhasználók alakzatokat, például téglalapokat, köröket, ellipsziseket és szabadkézi megjegyzéseket rajzolhatnak a képekre.
- Megjegyzések és megjegyzések: A felhasználók egyéni megjegyzéseket és megjegyzéseket fűzhetnek a kép bizonyos részeihez az Annotorious segítségével.
- Címkézés vagy címkézés: Az Annotorious támogatja a címkék vagy címkék hozzáadását a képen belüli különböző területek vagy objektumok megjegyzéseihez.
- Integráció: Az Annotorious könnyen integrálható weboldalakba és webhelyekbe, lehetővé téve a zökkenőmentes kommentár funkciót.
- Testreszabás: A könyvtár lehetőséget biztosít a kommentárok megjelenésének és viselkedésének testreszabására az Ön igényei szerint.
- Kompatibilitás: Az Annotorious jól működik különféle webböngészőkkel és platformokkal, így sokoldalúan használható különböző környezetekben.
Az Annotorious első lépései
Háromféleképpen szerezheti be az Annotorious-t, és kezdheti el használni webes projektjeiben.
A Node.js letöltése és telepítése után futtassa az alábbi parancsot:
Telepítse az Annotoryt az NPM segítségével
npm install @recogito/annotorious
Az Annotorious az ingyenes CDN-szerveren is található, és az alábbi URL-eket használhatja:
- 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
Töltse le az Annotorious előre elkészített legújabb kiadását a GitHubról. Miután kicsomagolta a tömörített kiadást, az alábbi fájlokat fogja látni (ahol az annotorious.min.css és az annotorious.min.js fájlokat használják a webhelyen a képannotációhoz):
- annotorious.min.css
- annotorious.min.js
- annotorious.umd.js.map
- recogito-polyfills.js
Megjegyzések hozzáadása a képekhez
Ha letöltünk egy előre elkészített kiadást, annotorious.min.css és annotorious.min.js fájlokat kapunk, amelyeket a head tag-ben a webhelyhez kapcsolhatunk az Annotorious integrálása érdekében JavaScript könyvtár. A képannotációs könyvtár integrálása után hozzáadhatunk egy képet, amelyhez megjegyzéseket kell hozzáadni, és végül JavaScript kódot írhatunk az Annotorious könyvtár inicializálásához a megjegyzések hozzáadásához a képhez.
A fenti kód egyszerűen egy képet mutat a böngészőben, amely készen áll a megjegyzésekre. Miután a kép és a könyvtár betöltődött a böngészőbe, duplán megérinthetjük, tartsuk lenyomva és húzzuk a kép kívánt pozícióját, hogy alakzatot rajzoljunk a kívánt terület kiemelése érdekében. Az alakzat megrajzolása után megnyílik egy felugró ablak, amely lehetővé teszi megjegyzések hozzáadását, sőt a kapcsolódó megjegyzések címkézését/címkézését is. Például nézze meg az alábbi képernyőképet:
JSON tárolt megjegyzések hozzáadása a képekhez
Az előző példában bemutattuk, hogyan lehet integrálni az Annotorious könyvtárat a weblappal, és kézzel rajzolni megjegyzéseket a képre. Lehetőség van azonban arra is, hogy előre meghatározott megjegyzéseket tároljon egy JSON-fájlban, beleértve a pozíciójukat, a megjegyzések adatait töltse be a JSON-fájlból a loadAnnotations módszerrel, majd ezeket a megjegyzéseket automatikusan hozzáadja a képhez.
Megjegyzés: Az Annotorious megfelel a W3C webes megjegyzések adatmodelljének és a W3C Media Fragments Specification, amellyel megjegyzéseket adhat hozzá a médiaforrás meghatározott részeihez vagy töredékeihez. Tehát kompatibilis JSON-fájlstruktúrát kell használni.
Az alábbiakban látható a minta annotations.json fájl, amely arra szolgál, hogy automatikusan megjegyzéseket adjon a képhez:
A fenti kód betölti a kommentáradatokat az annotations.json fájlból, és automatikusan hozzáadja őket a képhez. Például nézze meg az alábbi képernyőképet:
Online Demo
A fenti két példát online is kipróbálhatja az Kép megjegyzések bemutatója és JSON-alapú képfeljegyzések demójával.
Következtetés
Az Annotorious nyílt forráskódú, és nagyszerű annotációs JavaScript-könyvtár: azonban csak megjegyzések hozzáadását támogatja a képekhez. Ezenkívül korlátozott számú alakzat is használható megjegyzésekhez.
