Įspūdinga „JavaScript“ vaizdo komentarų biblioteka

Pridėkite piešinių, komentarų ir etikečių prie vaizdų tinklalapiuose naudodami „JavaScript“ biblioteką Annotorious.

Kas yra Anotorius?

„Annotorious“ yra atvirojo kodo vaizdo komentarų biblioteka, parašyta „JavaScript“, kuri leidžia pridėti komentarų ant vaizdų naršyklėje piešiant figūras norimose vaizdo vietose. Kai figūra nupiešta komentarui, ji taip pat atidaro iššokantįjį langą, kuriame galima pridėti komentarų ir netgi pažymėti komentarą, pridedant žymų. Biblioteka taip pat palaiko atsakymų pridėjimą prie esamų komentarų ir, jei reikia, juos ištrina.

Kai kurios „Annotorious“ bibliotekos palaikomos funkcijos yra išvardytos toliau:

Brėžti figūras: „Annotorious“ leidžia naudotojams piešti tokias formas kaip stačiakampiai, apskritimai, elipsės ir komentarai ant vaizdų ranka.
Komentarai ir pastabos: naudotojai gali pridėti tinkintų komentarų ir pastabų prie konkrečių vaizdo dalių naudodami Annotorious.
Žymėjimas arba žymėjimas: Annotorious palaiko galimybę pridėti etikečių arba žymų, kad būtų galima komentuoti skirtingas vaizdo sritis ar objektus.
Integravimas: „Annotorious“ galima lengvai integruoti į tinklalapius ir svetaines, kad būtų galima sklandžiai naudotis komentarų funkcijomis.
Tinkinimas: bibliotekoje yra parinkčių, kaip tinkinti komentarų išvaizdą ir elgesį, kad jie atitiktų jūsų poreikius.
Suderinamumas: „Annotorious“ puikiai veikia su įvairiomis žiniatinklio naršyklėmis ir platformomis, todėl yra universalus įvairiose aplinkose.

GitHub Stats

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

Darbo su Annotorious pradžia

Yra trys būdai, kaip gauti Annotorious ir pradėti jį naudoti savo žiniatinklio projektuose.

Įdiegę Node.js, paleiskite šią komandą:

Įdiekite „Annotory“ naudodami NPM


npm install @recogito/annotorious

„Annotorious“ taip pat yra priglobta nemokamame CDN serveryje ir galite naudoti toliau nurodytus URL:

Atsisiųskite iš anksto sukurtą naujausią Annotorious leidimą iš GitHub. Išskleidę suglaudintą leidimą, toliau pamatysite failus (kur annotorious.min.css ir annotorious.min.js bus naudojami svetainėje vaizdų anotacijai):

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

Pridėkite komentarų prie vaizdų

Jei atsisiunčiame iš anksto sukurtą leidimą, gauname annotorious.min.css ir annotorious.min.js failus, kuriuos galima susieti su svetaine head tag, kad būtų galima integruoti Annotorious JavaScript biblioteka. Integravus vaizdo komentarų biblioteką, galime pridėti vaizdą, prie kurio reikia pridėti komentarų, ir galiausiai galime parašyti JavaScript kodą, kad inicijuotume Annotorious biblioteką, kad būtų galima pridėti komentarų prie vaizdo.

Aukščiau pateiktas kodas tiesiog rodo vaizdą naršyklėje, paruoštą komentarams. Kai vaizdas ir biblioteka įkeliami į naršyklę, galime dukart bakstelėti, palaikyti ir vilkti norimą vaizdo padėtį, kad nubrėžtume figūrą ir paryškintume reikiamą sritį. Nubrėžus formą, atsidaro iššokantis langas, kuriame galite pridėti komentarų ir netgi pažymėti/žymėti susijusius komentarus. Pavyzdžiui, patikrinkite toliau pateiktą ekrano kopiją:

Pridėkite komentarus prie vaizdo

Pridėkite JSON saugomus komentarus prie vaizdų

Ankstesniame pavyzdyje parodėme, kaip integruoti Annotorious biblioteką su tinklalapiu ir rankiniu būdu piešti komentarus ant vaizdo. Tačiau taip pat galima saugoti iš anksto apibrėžtus komentarus JSON faile, įskaitant jų pozicijas, įkelti komentarų duomenis iš JSON failo naudojant loadAnnotations metodą ir tada automatiškai pridėti tuos komentarus prie vaizdo.

Pastaba: Annotorious atitinka W3C žiniatinklio komentarų duomenų modelį ir W3C medijos fragmentų specifikacija, kad pridėtumėte komentarus prie konkrečių medijos šaltinio dalių arba fragmentų. Taigi, turėtų būti naudojama suderinama JSON failų struktūra.

Toliau pateikiamas pavyzdys annotations.json, kuris naudojamas automatiškai pridėti komentarus prie vaizdo:

Aukščiau pateiktas kodas įkelia komentarų duomenis iš failo annotations.json ir automatiškai prideda juos prie vaizdo. Pavyzdžiui, patikrinkite toliau pateiktą ekrano kopiją:

Pridėkite JSON saugomus komentarus prie vaizdo

Demo internete

Taip pat galite išbandyti du aukščiau pateiktus pavyzdžius internete, patikrinę Vaizdo komentaro demonstracinė versija ir JSON pagrįstų vaizdo komentarų demonstraciją, kad geriau suprastumėte Annotorious JavaScript biblioteką.

Išvada

„Annotorious“ yra atvirojo kodo ir puiki „JavaScript“ komentarų biblioteka: tačiau ji palaiko tik komentarų pridėjimą prie vaizdų. Be to, yra ribotas skaičius formų, kurias galima naudoti komentarams.