Tunnettu kirjasto JavaScript-kuvamerkintöille
Lisää piirustuksia, kommentteja ja tarroja verkkosivuilla oleviin kuviin käyttämällä JavaScriptin Annotorious-kirjastoa.
Mikä on Annotorious?
Annotorious on JavaScriptillä kirjoitettu avoimen lähdekoodin kuvien merkintäkirjasto, joka mahdollistaa merkintöjen lisäämisen kuviin selaimessa piirtämällä muotoja kuvan haluttuihin paikkoihin. Aina kun muoto piirretään huomautusta varten, se avaa myös ponnahdusikkunan, jossa voit lisätä kommentteja ja jopa merkitä merkinnän lisäämällä tunnisteita. Kirjasto tukee myös vastausten lisäämistä olemassa oleviin huomautuksiin ja niiden poistamista tarvittaessa.
Jotkut Annotorious-kirjaston tukemista ominaisuuksista on lueteltu alla:
- Piirrä muotoja: Annotoriousin avulla käyttäjät voivat piirtää kuviin muotoja, kuten suorakulmioita, ympyröitä, ellipsejä ja vapaalla kädellä tehtyjä huomautuksia.
- Kommentit ja huomautukset: Käyttäjät voivat lisätä mukautettuja kommentteja ja huomautuksia kuvan tiettyihin osiin Annotoriousin avulla.
- Etsiminen tai merkitseminen: Annotorious tukee mahdollisuutta lisätä tarroja tai tunnisteita kuvan eri alueiden tai kohteiden merkitsemiseksi.
- Integraatio: Annotorious voidaan helposti integroida verkkosivuille ja verkkosivustoille, mikä mahdollistaa saumattoman merkintätoiminnon.
- Räätälöinti: Kirjasto tarjoaa vaihtoehtoja merkintöjen ulkoasun ja toiminnan mukauttamiseen tarpeidesi mukaan.
- Yhteensopivuus: Annotorious toimii hyvin eri verkkoselaimien ja alustojen kanssa, mikä tekee siitä monipuolisen eri ympäristöissä.
Annotoryusin käytön aloittaminen
On kolme tapaa hankkia Annotorious ja alkaa käyttää sitä verkkoprojekteissasi.
Kun olet asentanut Node.js, suorita alla oleva komento:
Asenna Annotorious NPM:n avulla
npm install @recogito/annotorious
Annotoriousta isännöi myös ilmainen CDN-palvelin, ja voit käyttää alla olevia URL-osoitteita:
- 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
Lataa valmiiksi rakennettu uusin Annotorious-julkaisu GitHubista. Kun purat zip-julkaisun, näet alla tiedostot (joissa annotorious.min.css- ja annotorious.min.js-tiedostoja käytetään verkkosivustolla kuvien huomautuksiin):
- annotorious.min.css
- annotorious.min.js
- annotorious.umd.js.map
- recogito-polyfills.js
Lisää kommentteja kuviin
Jos lataamme valmiiksi rakennetun julkaisun, saamme annotorious.min.css- ja annotorious.min.js-tiedostoja, jotka voidaan linkittää verkkosivustoon head-tunnisteessa Annotoriousin integroimiseksi JavaScript-kirjasto. Kun kuvan merkintäkirjasto on integroitu, voimme lisätä kuvan, johon on lisättävä huomautuksia, ja lopuksi voimme kirjoittaa JavaScript-koodin alustaaksemme Annotorious-kirjaston merkintöjen lisäämiseksi kuvaan.
Yllä oleva koodi näyttää yksinkertaisesti kuvan selaimessa, joka on valmis huomautuksia varten. Kun kuva ja kirjasto on ladattu selaimeen, voimme kaksoisnapauttaa, pitää painettuna ja vetää kuvan haluttua kohtaa piirtääksesi muodon halutun alueen korostamiseksi. Kun muoto on piirretty, avautuu ponnahdusikkuna, jonka avulla voit lisätä kommentteja ja jopa merkitä/tagata liittyviä kommentteja. Tarkista esimerkiksi alla oleva kuvakaappaus:
Lisää JSON-tallennettuja huomautuksia kuviin
Edellisessä esimerkissä näytimme, kuinka Annotorious-kirjasto integroidaan verkkosivulle ja piirretään manuaalisesti merkintöjä kuvaan. On kuitenkin myös mahdollista tallentaa ennalta määritettyjä merkintöjä JSON-tiedostoon, mukaan lukien niiden paikat, ladata merkintätiedot JSON-tiedostosta loadAnnotations-menetelmällä ja lisätä ne sitten automaattisesti kuvaan.
Huomaa: Annotorious noudattaa W3C Web Annotation -tietomallia ja W3C Media Fragments Specification, jolla voit lisätä huomautuksia mediaresurssin tiettyihin osiin tai fragmentteihin. Joten yhteensopivaa JSON-tiedostorakennetta tulisi käyttää.
Alla on esimerkki annotations.json-tiedostosta, jota käytetään merkintöjen lisäämiseen kuvaan:
Yllä oleva koodi lataa huomautustiedot annotations.json-tiedostosta ja lisää ne kuvaan automaattisesti. Tarkista esimerkiksi alla oleva kuvakaappaus:
Online-demo
Voit myös kokeilla kahta yllä olevaa esimerkkiä verkossa tarkistamalla kohteen Kuvamerkintöjen esittely ja JSON-pohjaisen kuvamerkintöjen esittelyn avulla, jotta ymmärrät paremmin Annotorious JavaScript -kirjaston.
Johtopäätös
Annotorious on avoimen lähdekoodin ja loistava annotaatio-JavaScript-kirjasto: se tukee kuitenkin vain huomautusten lisäämistä kuviin. Lisäksi on olemassa myös rajoitettu määrä muotoja, joita voidaan käyttää huomautuksiin.
