Biblioteca Annotious para anotações de imagens em JavaScript

O que é Annotorious?

Annotorious é uma biblioteca de anotação de imagem de código aberto escrita em JavaScript que permite adicionar anotações em imagens dentro do navegador desenhando formas em posições desejadas da imagem. Sempre que uma forma é desenhada para anotação, ela também abre um pop-up para adicionar comentários e até mesmo rotular a anotação adicionando tags. A biblioteca também suporta adicionar respostas a anotações existentes e também excluí-las, se necessário.

Alguns dos recursos suportados pela biblioteca Annotorious estão listados abaixo:

• Desenhar formas: o Annotorious permite que os usuários desenhem formas como retângulos, círculos, elipses e anotações à mão livre em imagens.
• Comentários e notas: os usuários podem adicionar comentários e notas personalizados a partes específicas de uma imagem usando o Annotorious.
• Rotulagem ou marcação: o Annotorious suporta a capacidade de adicionar rótulos ou tags para anotar diferentes áreas ou objetos dentro de uma imagem.
• Integração: o Annotorious pode ser facilmente integrado em páginas da web e sites, permitindo uma funcionalidade de anotação perfeita.
• Personalização: a biblioteca oferece opções para personalizar a aparência e o comportamento das anotações para atender às suas necessidades.
• Compatibilidade: O Annotorious funciona bem com vários navegadores e plataformas, o que o torna versátil para diferentes ambientes.

Estatísticas do GitHub

Nome:
Linguagem:
Estrelas:
Garfos:
Licença:
O repositório foi atualizado pela última vez em

Introdução ao Annotorious

Há três maneiras de obter o Annotorious e começar a usá-lo em seus projetos web.

1. Instalar usando NPM

Depois de instalar o Node.js, execute o comando abaixo:

npm install @recogito/annotorious

2. Use a biblioteca hospedada via CDN

O Annotorious também está hospedado no servidor CDN gratuito e você pode usar URLs como abaixo:

• 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

3. Use a versão pré-construída

Baixe uma versão mais recente pré-construída do Annotorious do GitHub. Depois de extrair a versão compactada, você verá os arquivos abaixo (onde annotorious.min.css e annotorious.min.js serão usados no site para anotação de imagem):

• anotorious.min.css
• annotious.min.js
• annotatorious.umd.js.map
• recogito-polyfills.js

Adicionar anotações às imagens

Se baixarmos uma versão pré-construída, obtemos os arquivos annotorious.min.css e annotorious.min.js que podem ser vinculados ao site na tag head para integrar a biblioteca JavaScript Annotorious. Após a biblioteca de anotações de imagem ser integrada, podemos adicionar uma imagem na qual as anotações devem ser adicionadas e, finalmente, podemos escrever o código JavaScript para inicializar a biblioteca Annotorious para adicionar anotações à imagem.

O código acima simplesmente mostra uma imagem no navegador pronta para anotações. Uma vez que a imagem e a biblioteca são carregadas no navegador, podemos tocar duas vezes, segurar e arrastar na posição desejada da imagem para desenhar uma forma para destacar a área necessária. Uma vez que a forma é desenhada, um pop-up abre, o que permite que você adicione comentários e até mesmo rotule/marque comentários relacionados. Por exemplo, verifique a captura de tela abaixo:

Adicionar anotações armazenadas em JSON às imagens

No exemplo anterior, mostramos como integrar a biblioteca Annotorious com a página da web e desenhar manualmente anotações na imagem. No entanto, também é possível armazenar anotações predefinidas em um arquivo JSON, incluindo suas posições, carregar dados de anotações do arquivo JSON usando o método loadAnnotations e, então, adicionar automaticamente essas anotações à imagem.

Observação: o Annotorious está em conformidade com o Modelo de Dados de Anotação da Web do W3C e a Especificação de Fragmentos de Mídia do W3C para adicionar anotações em partes ou fragmentos específicos de um recurso de mídia. Portanto, a estrutura de arquivo JSON compatível deve ser usada.

Abaixo está o arquivo de exemplo annotations.json que é usado para adicionar anotações automaticamente à imagem:

O código acima carrega dados de anotações do arquivo annotations.json e os adiciona à imagem automaticamente. Por exemplo, confira a captura de tela abaixo:

Demonstração on-line

Você também pode tentar os dois exemplos acima on-line verificando Demonstração de anotação de imagem e Demonstração de anotações de imagem com base em JSON para entender melhor a biblioteca JavaScript Annotorious.

Conclusão

Annotorious é open source e uma ótima biblioteca JavaScript de anotações: no entanto, ele só suporta adicionar anotações a imagens. Além disso, há também um número limitado de formas que podem ser usadas para anotações.

Produtos Similares