Biblioteca anotoria para anotaciones de imágenes de JavaScript

¿Qué es antorious?

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

Algunas de las funciones admitidas por la biblioteca Antorious se enumeran a continuación:

• Dibujar formas: Anotorious permite a los usuarios dibujar formas como rectángulos, círculos, elipses y anotaciones a mano alzada en imágenes.
• Comentarios y notas: los usuarios pueden agregar comentarios y notas personalizados a partes específicas de una imagen usando Anotorious.
• Etiquetado o etiquetado: Anotorious admite la capacidad de agregar etiquetas o rótulos para anotar diferentes áreas u objetos dentro de una imagen.
• Integración: Anotorious 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 ofrece opciones para personalizar la apariencia y el comportamiento de las anotaciones según sus necesidades.
• Compatibilidad: Annotory 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

Comenzando con Antorious

Hay tres formas de obtener Annorious y empezar a utilizarlo en tus proyectos web.

1. Instalar usando NPM

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

npm install @recogito/annotorious

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

Annotorious también está alojado en un servidor CDN gratuito y puede utilizar 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 prediseñadas

Descargue la última versión prediseñadas de Annotorious desde GitHub. Después de extraer la versión comprimida, verá los siguientes archivos (donde annotorious.min.css y annotorious.min.js se utilizarán en el sitio web para la anotación de imágenes):

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

Agregar anotaciones a imágenes

Si descargamos una versión prediseñadas, obtenemos los archivos anotorious.min.css y anotorious.min.js que se pueden vincular con el sitio web en la etiqueta head para integrar Annotorious. Biblioteca de JavaScript. Una vez integrada la biblioteca de anotaciones de imágenes, podemos agregar una imagen a la que se deben agregar anotaciones y, finalmente, podemos escribir código JavaScript para inicializar la biblioteca Antorious 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 tocar dos veces, mantener presionado y arrastrar la posición deseada de la imagen para dibujar una forma y resaltar el área requerida. Una vez dibujada la forma, se abre una ventana emergente que le permite agregar comentarios e incluso etiquetar comentarios relacionados. Por ejemplo, consulte la siguiente captura de pantalla:

Agregar anotaciones almacenadas JSON a imágenes

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

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

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

El código anterior carga 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 una mejor comprensión de la biblioteca JavaScript de Anotorious.

Conclusión

Antorious es de código abierto y una excelente biblioteca de anotaciones de JavaScript: sin embargo, solo admite agregar anotaciones a imágenes. Además, también existe un número limitado de formas que se pueden utilizar para anotaciones.

Productos Similares