Biblioteca Annotorious para anotaciones de imágenes en JavaScript

¿Qué es Annotorious?

Annotorious es una biblioteca de anotación de imágenes de código abierto escrita en JavaScript que permite agregar anotaciones a las imágenes dentro del navegador dibujando formas en las posiciones deseadas de la imagen. Siempre que se dibuja una forma para la anotación, también se abre una ventana emergente para agregar comentarios e incluso etiquetar la anotación agregando etiquetas. La biblioteca también permite agregar respuestas a anotaciones existentes y también eliminarlas, si es necesario.

A continuación se enumeran algunas de las características compatibles con la biblioteca Annotorious:

• Dibujar formas: Annotorious permite a los usuarios dibujar formas como rectángulos, círculos, elipses y anotaciones a mano alzada en las imágenes.
• Comentarios y notas: Los usuarios pueden agregar comentarios y notas personalizados a partes específicas de una imagen usando Annotorious.
• Etiquetado o etiquetado: Annotorious admite la posibilidad de agregar etiquetas o rótulos para anotar diferentes áreas u objetos dentro de una imagen.
• Integración: Annotorious se puede integrar fácilmente en páginas web y sitios web, lo que permite una funcionalidad de anotación perfecta.
• Personalización: la biblioteca proporciona opciones para personalizar la apariencia y el comportamiento de las anotaciones para adaptarlas a sus necesidades.
• Compatibilidad: Annotorious funciona bien con varios navegadores web y plataformas, lo que lo hace versátil para diferentes entornos.

Estadísticas de GitHub

Nombre:
Idioma:
Estrellas:
Tenedores:
Licencia:
El repositorio se actualizó por última vez en

Introducción a Annotorious

Hay tres formas de obtener Annotorious y comenzar a usarlo en tus proyectos web.

1. Instalar usando NPM

Después de instalar Node.js, ejecute el siguiente comando:

npm install @recogito/annotorious

2. Utilice una biblioteca alojada a través de CDN

Annotorious también está alojado en un servidor CDN gratuito y puedes usar URL como las siguientes:

• 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. Utilice una versión predefinida

Descargue una versión más reciente de Annotorious precompilada desde GitHub. Después de extraer la versión comprimida, verá los siguientes archivos (donde se usarán annotorious.min.css y annotorious.min.js en el sitio web para la anotación de imágenes):

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

Agregar anotaciones a las imágenes

Si descargamos una versión preconstruida, obtenemos los archivos annotorious.min.css y annotorious.min.js que se pueden vincular con el sitio web en la etiqueta principal para integrar la biblioteca de JavaScript de Annotorious. Una vez que se integra la biblioteca de anotaciones de imágenes, podemos agregar una imagen a la que se deben agregar anotaciones y, finalmente, podemos escribir el código JavaScript para inicializar la biblioteca de Annotorious para agregar anotaciones a la imagen.

El código anterior simplemente muestra una imagen en el navegador lista para anotaciones. Una vez que la imagen y la biblioteca están cargadas en el navegador, podemos hacer doble clic, mantener presionado y arrastrar en la posición deseada de la imagen para dibujar una forma con el fin de resaltar el área requerida. Una vez que se dibuja la forma, se abre una ventana emergente que le permite agregar comentarios e incluso también etiquetar comentarios relacionados. Por ejemplo, consulte la siguiente captura de pantalla:

Agregar anotaciones almacenadas en formato JSON a las imágenes

En el ejemplo anterior, mostramos cómo integrar la biblioteca Annotorious con la página web y dibujar anotaciones manualmente en la imagen. Sin embargo, también es posible almacenar anotaciones predefinidas en un archivo JSON, incluidas sus posiciones, cargar datos de anotaciones desde el archivo JSON mediante el método loadAnnotations y luego agregar automáticamente esas anotaciones a la imagen.

Nota: Annotorious cumple con el Modelo de datos de anotación web del W3C y la Especificación de fragmentos multimedia del W3C para agregar anotaciones en partes o fragmentos específicos de un recurso multimedia. Por lo tanto, se debe utilizar una estructura de archivo JSON compatible.

A continuación se muestra el archivo de muestra annotations.json que se utiliza para agregar automáticamente anotaciones a la imagen:

El código anterior carga los datos de anotaciones del archivo annotations.json y los agrega a la imagen automáticamente. Por ejemplo, consulte la siguiente captura de pantalla:

Demostración en línea

También puede probar los dos ejemplos anteriores en línea consultando Demostración de anotación de imágenes y Demostración de anotaciones de imágenes basadas en JSON para comprender mejor la biblioteca JavaScript de Annotorious.

Conclusión

Annotorious es una biblioteca de JavaScript de código abierto y excelente para realizar anotaciones. Sin embargo, solo permite agregar anotaciones a imágenes. Además, también hay una cantidad limitada de formas que se pueden usar para realizar anotaciones.

Productos Similares