sm annotate

Инструмент аннотации видео и изображений

Этот проект предоставляет инструмент аннотации для HTML -видео и элементов изображения. Инструмент позволяет пользователям рисовать и аннотировать видео и изображения, используя различные инструменты для рисования, включая кривые, прямоугольники, эллипсы и тексты. Пользователи также могут настроить цвет и размер инсульта своих аннотаций.

Демо: lifeart.github.io/sm-annotate

Функции

• Рисование и аннотирование элементов видео и изображений.
• Несколько инструментов рисования (кривая, прямоугольник, эллипс и текст).
• Настраиваемый цвет и размер хода для аннотаций.
• ↩ Функциональность отменить.
• Сериализация и десериализация нарисованных форм.
• Масштабирование форм до текущего размера холста.
• ⌨ Комплект клавиш для отмены (CTRL/CMD + Z).
• Обработка событий для событий указателя (мышь и прикосновение).
• Воспроизведение аннотированных кадров как видео.
• Сохранение текущего кадра или всех кадров с аннотациями.
• Видео -наложение Coparsion

Дополнительные преимущества

• Нулевые зависимости.
• Поддержка мобильных устройств.
• Мощная система плагина.
• Написано в TypeScript.

Начиная

Добавьте пакет в свой проект с помощью пряжи:

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

Использование

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

Пользователи могут рисовать и аннотировать, используя доступные инструменты (кривая, прямоугольник, эллипс и текст) и настраивать цвет и размер хода аннотаций. Инструмент также поддерживает функциональность и обработку событий для событий указателя (мышь и прикосновение).

Чтобы сохранить текущий кадр или все кадры с аннотациями, используйте методы saveCurrentFrame или saveAllFrames , соответственно.

Горячие клавиши

Кривый инструмент

Ключевой код	Результат
Shift	Великолепный x2
r	Красный цвет
g	Зеленый цвет
b	Синий цвет
y	Желтый цвет
1 - 9	Размер инструмента

Внося

Мы приветствуем вклад в улучшение проекта. Пожалуйста, не стесняйтесь отправлять вопросы или привлекать запросы на рассмотрение.

Лицензия

Этот код разрешен для некоммерческого использования. Для коммерческого использования пользователи должны связаться с автором.