Annotorious Library for JavaScript-bildekommentarer

Hva er Annotorious?

Annotorious er et åpen kildekode-bildekommentarbibliotek skrevet i JavaScript som gjør det mulig å legge til merknader på bilder i nettleseren ved å tegne figurer på ønskede posisjoner av bildet. Når en form tegnes for merknad, åpner den også en popup for å legge til kommentarer og til og med merke merknaden ved å legge til tagger. Biblioteket støtter også å legge til svar på eksisterende merknader og også slette dem om nødvendig.

Noen av funksjonene som støttes av Annotorious-biblioteket er oppført nedenfor:

• Tegn figurer: Annotorious gjør det mulig for brukere å tegne figurer som rektangler, sirkler, ellipser og frihåndskommentarer på bilder.
• Kommentarer og notater: Brukere kan legge til egendefinerte kommentarer og notater til bestemte deler av et bilde ved å bruke Annotorious.
• Etiketter eller tagging: Annotorious støtter muligheten til å legge til etiketter eller etiketter for å kommentere forskjellige områder eller objekter i et bilde.
• Integrasjon: Annotorious kan enkelt integreres i nettsider og nettsteder, noe som gir sømløs annoteringsfunksjonalitet.
• Tilpasning: Biblioteket tilbyr alternativer for å tilpasse utseendet og oppførselen til merknader for å passe dine behov.
• Kompatibilitet: Annotorious fungerer godt med ulike nettlesere og plattformer, noe som gjør den allsidig for ulike miljøer.

GitHub-statistikk

Navn:
Språk:
Stjerner:
Gafler:
Tillatelse:
Repository ble sist oppdatert kl

Komme i gang med Annotorious

Det er tre måter å bli Annotorious og begynne å bruke i nettprosjektene dine.

Etter at du har installert Node.js, kjør kommandoen nedenfor:

npm install @recogito/annotorious

Annotorious er også vert på gratis CDN-server, og du kan bruke nettadresser som nedenfor:

• 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

Last ned en forhåndsbygd siste utgave av Annotorious fra GitHub. Etter at du har trukket ut den zippede utgivelsen, vil du se filene nedenfor (der annotorious.min.css og annotorious.min.js vil bli brukt på nettstedet for bildekommentarer):

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

Legg til merknader til bilder

Hvis vi laster ned en forhåndsbygd utgivelse, får vi annotorious.min.css- og annotorious.min.js-filer som kan kobles til nettstedet i head-taggen for å integrere Annotorious JavaScript-bibliotek. Etter at bildekommentarbiblioteket er integrert, kan vi legge til et bilde som merknader må legges til, og til slutt kan vi skrive JavaScript-kode for å initialisere Annotorious-biblioteket for å legge til merknader til bildet.

Koden ovenfor viser ganske enkelt et bilde i nettleseren klar for merknader. Når bildet og biblioteket er lastet inn i nettleseren, kan vi dobbelttrykke, holde og dra på ønsket plassering av bildet for å tegne en form for å markere ønsket område. Når formen er tegnet, åpnes en popup som lar deg legge til kommentarer og til og med merke/merke relaterte kommentarer. Sjekk for eksempel skjermbildet nedenfor:

Legg til JSON-lagrede merknader til bilder

I det forrige eksempelet viste vi hvordan du integrerer Annotorious-biblioteket med nettsiden og manuelt tegner merknader på bildet. Det er imidlertid også mulig å lagre forhåndsdefinerte merknader i en JSON-fil inkludert deres posisjoner, laste inn merknadsdata fra JSON-filen ved å bruke loadAnnotations-metoden og deretter automatisk legge til disse merknadene til bildet.

Merk: Annotorious er i samsvar med W3C Web Annotation Data Model og W3C Media Fragments Specification for å legge til merknader på bestemte deler eller fragmenter av en mediaressurs. Så kompatibel JSON-filstruktur bør brukes.

Nedenfor er eksempelfilen annotations.json som brukes til å automatisk legge til merknader til bildet:

Ovenfor koden laster merknadsdata fra annotations.json-filen og legger dem til i bildet automatisk. Sjekk for eksempel skjermbildet nedenfor:

Online demo

Du kan også prøve de to eksemplene ovenfor på nettet ved å sjekke Bildekommentardemo og JSON-basert bildeannoteringsdemo for bedre forståelse av Annotorious JavaScript-bibliotek.

Konklusjon

Annotorious er åpen kildekode og et flott JavaScript-bibliotek for kommentarer: det støtter imidlertid bare å legge til merknader til bilder. Dessuten er det også begrenset antall former som kan brukes til merknader.

Lignende Produkter