Anotorious bibliotēka JavaScript attēlu anotācijām

Pievienojiet zīmējumus, komentārus un etiķetes attēliem tīmekļa lapās, izmantojot JavaScript bibliotēku Annotorious.

Kas ir Annotorious?

Annotorious ir atvērtā koda attēlu anotāciju bibliotēka, kas rakstīta JavaScript, kas ļauj pārlūkprogrammā pievienot anotācijas attēliem, zīmējot formas vēlamajās attēla pozīcijās. Ikreiz, kad anotācijai tiek uzzīmēta forma, tiek atvērts arī uznirstošais logs, lai pievienotu komentārus un pat atzīmētu anotāciju, pievienojot atzīmes. Bibliotēka atbalsta arī atbilžu pievienošanu esošajām anotācijām un arī to dzēšanu, ja nepieciešams.

Tālāk ir norādītas dažas no Annotorious bibliotēkas atbalstītajām funkcijām:

Zīmēt formas: Annotorious ļauj lietotājiem zīmēt formas, piemēram, taisnstūrus, apļus, elipses un brīvrokas anotācijas.
Komentāri un piezīmes: lietotāji var pievienot pielāgotus komentārus un piezīmes noteiktām attēla daļām, izmantojot Annotorious.
Marķēšana vai marķēšana: Annotorious atbalsta iespēju pievienot etiķetes vai atzīmes, lai komentētu dažādus attēla apgabalus vai objektus.
Integrācija: Annotorious var viegli integrēt tīmekļa lapās un vietnēs, nodrošinot netraucētu anotāciju funkcionalitāti.
Pielāgošana: bibliotēka nodrošina iespējas pielāgot anotāciju izskatu un darbību atbilstoši jūsu vajadzībām.
Saderība: Annotorious labi darbojas ar dažādām tīmekļa pārlūkprogrammām un platformām, padarot to daudzpusīgu dažādām vidēm.

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

Darba sākšana ar Annotorious

Ir trīs veidi, kā iegūt Annotorious un sākt to izmantot savos tīmekļa projektos.

Kad esat instalējis Node.js, palaidiet tālāk norādīto komandu:

Instalējiet Annotory, izmantojot NPM


npm install @recogito/annotorious

Annotorious tiek mitināts arī bezmaksas CDN serverī, un varat izmantot tālāk norādītos vietrāžus URL:

Lejupielādējiet iepriekš izveidotu jaunāko Annotorious laidienu no GitHub. Pēc zip laidiena izvilkšanas jūs redzēsiet tālāk norādītos failus (kur vietnē annotorious.min.css un annotorious.min.js tiks izmantoti attēla anotācijai):

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

Pievienojiet attēliem piezīmes

Ja mēs lejupielādējam iepriekš izveidotu laidienu, mēs saņemam annotorious.min.css un annotorious.min.js failus, kurus var saistīt ar vietni head tagā, lai integrētu Annotorious. JavaScript bibliotēka. Kad attēla anotāciju bibliotēka ir integrēta, mēs varam pievienot attēlu, kuram ir jāpievieno anotācijas, un visbeidzot mēs varam ierakstīt JavaScript kodu, lai inicializētu Annotorious bibliotēku anotāciju pievienošanai attēlam.

Augšējais kods vienkārši parāda attēlu pārlūkprogrammā, kas ir gatavs anotācijām. Kad attēls un bibliotēka ir ielādēti pārlūkprogrammā, mēs varam divreiz pieskarties, turēt un vilkt vēlamajā attēla pozīcijā, lai uzzīmētu formu un iezīmētu vajadzīgo apgabalu. Kad forma ir uzzīmēta, tiek atvērts uznirstošais logs, kas ļauj pievienot komentārus un pat pievienot etiķetes/atzīmes saistītos komentārus. Piemēram, pārbaudiet zemāk redzamo ekrānuzņēmumu:

Pievienojiet attēlam anotācijas

Pievienojiet attēliem JSON saglabātās anotācijas

Iepriekšējā piemērā mēs parādījām, kā integrēt Annotorious bibliotēku ar tīmekļa lapu un manuāli uzzīmēt attēla anotācijas. Tomēr ir iespējams arī saglabāt iepriekš noteiktas anotācijas JSON failā, tostarp to atrašanās vietas, ielādēt anotāciju datus no JSON faila, izmantojot metodi loadAnnotations, un pēc tam automātiski pievienot šīs anotācijas attēlam.

Piezīme. Annotorious atbilst W3C tīmekļa anotācijas datu modelim un W3C multivides fragmentu specifikācija, lai pievienotu anotācijas noteiktām multivides resursa daļām vai fragmentiem. Tāpēc ir jāizmanto saderīga JSON failu struktūra.

Tālāk ir parādīts faila annotations.json paraugs, kas tiek izmantots, lai attēlam automātiski pievienotu anotācijas.

Virs kods ielādē anotāciju datus no faila annotations.json un automātiski pievieno tos attēlam. Piemēram, pārbaudiet zemāk redzamo ekrānuzņēmumu:

Pievienojiet attēlam JSON saglabātās anotācijas

Tiešsaistes demonstrācija

Varat arī izmēģināt divus iepriekš minētos piemērus tiešsaistē, pārbaudot Attēla anotācijas demonstrācija un JSON balstītu attēlu piezīmju demonstrāciju, lai labāk izprastu Annotorious JavaScript bibliotēku.

Secinājums

Annotorious ir atvērtā koda un lieliska anotāciju JavaScript bibliotēka: tomēr tā atbalsta tikai anotāciju pievienošanu attēliem. Turklāt ir arī ierobežots skaits formu, ko var izmantot anotācijām.