sm annotate

Herramienta de anotación de video e imagen

Este proyecto proporciona una herramienta de anotación para elementos de video e imagen HTML. La herramienta permite a los usuarios dibujar y anotar sobre video e imágenes utilizando varias herramientas de dibujo, incluidas curvas, rectángulos, elipses y textos. Los usuarios también pueden personalizar el color y el tamaño de la carrera de sus anotaciones.

Demo: lifeart.github.io/sm-annotate

Características

• Dibujo y anotando sobre elementos de video e imagen.
• Múltiples herramientas de dibujo (curva, rectángulo, elipse y texto).
• Color personalizable y tamaño de trazo para las anotaciones.
• ↩ Deshacer la funcionalidad.
• Serialización y deserialización de formas dibujadas.
• Escalado de forma al tamaño actual del lienzo.
• ⌨ Atendos de teclado para deshacer (CTRL/CMD + Z).
• Manejo de eventos para eventos de puntero (mouse y touch).
• Reproducción de marcos anotados como video.
• Guardar el marco actual o todos los marcos con anotaciones.
• Video superpuesto comparación

Beneficios adicionales

• Cero dependencias.
• Soporte para dispositivos móviles.
• Potente sistema de complementos.
• Escrito en mecanografiado.

Empezando

Agregue el paquete a su proyecto con hilo:

yarn add https://github.com/lifeart/sm-annotate.git

Uso

 import { SmAnnotate } from '@lifeart/sm-annotate' ;
const video = document . getElementById ( 'video' ) ;
const annotationTool = new AnnotationTool ( video ) ;

Los usuarios pueden dibujar y anotar utilizando las herramientas disponibles (curva, rectángulo, elipse y texto) y personalizar el color y el tamaño de la carrera de las anotaciones. La herramienta también admite la funcionalidad de deshacer y el manejo de eventos para eventos de puntero (mouse y tacto).

Para guardar el marco actual o todos los marcos con anotaciones, use los métodos saveCurrentFrame o saveAllFrames , respectivamente.

Teclas de acceso

Herramienta curva

Cinturón de llave	Resultado
Shift	Lupa x2
r	Color rojo
g	Color verde
b	Color azul
y	Color amarillo
1 - 9	Tamaño de herramienta

Que contribuye

Agradecemos contribuciones para mejorar el proyecto. No dude en enviar problemas o extraer solicitudes de consideración.

Licencia

Este código está permitido para uso no comercial. Para uso comercial, los usuarios deben comunicarse con el autor.