sm annotate

Ferramenta de anotação de vídeo e imagem

Este projeto fornece uma ferramenta de anotação para elementos de vídeo e imagem HTML. A ferramenta permite que os usuários desenhem e anotem sobre vídeo e imagens usando várias ferramentas de desenho, incluindo curvas, retângulos, elipses e textos. Os usuários também podem personalizar o tamanho da cor e o golpe de suas anotações.

Demo: lifeart.github.io/sm-annotate

Características

• Desenho e anotação sobre elementos de vídeo e imagem.
• Múltiplas ferramentas de desenho (curva, retângulo, elipse e texto).
• Tamanho personalizado de cores e acidente vascular cerebral para as anotações.
• ↩ Desfazer funcionalidade.
• Serialização e desserialização de formas desenhadas.
• Formas de escala para o tamanho atual da tela.
• ⌨ Atalhos de teclado para desfazer (Ctrl/CMD + Z).
• Manuseio de eventos para eventos de ponteiro (mouse e toque).
• Reprodução de quadros anotados como vídeo.
• Salvando o quadro atual ou todos os quadros com anotações.
• Comparação de sobreposição de vídeo

Benefícios adicionais

• Zero dependências.
• Suporte para dispositivos móveis.
• Sistema de plug -in poderoso.
• Escrito em TypeScript.

Começando

Adicione o pacote ao seu projeto usando o YARN:

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 ) ;

Os usuários podem desenhar e anotar usando as ferramentas disponíveis (curva, retângulo, elipse e texto) e personalizar o tamanho da cor e o golpe das anotações. A ferramenta também suporta a funcionalidade de desfazer e o manuseio de eventos para eventos de ponteiro (mouse e toque).

Para salvar o quadro atual ou todos os quadros com anotações, use os métodos saveCurrentFrame ou saveAllFrames , respectivamente.

Teclas de atalho

Ferramenta curva

Keycode	Resultado
Shift	Linente x2
r	Cor vermelha
g	Cor verde
b	Cor azul
y	Cor amarela
1 - 9	Tamanho da ferramenta

Contribuindo

Congratulamo -nos com contribuições para melhorar o projeto. Sinta -se à vontade para enviar questões ou puxar solicitações de consideração.

Licença

Este código é permitido para uso não comercial. Para uso comercial, os usuários devem entrar em contato com o autor.