sm annotate Download - sm annotate Quellcode Download

sm annotate

Andere Kategorien

Video Sync

Herunterladen

Video- und Bild -Annotation -Tool

Dieses Projekt bietet ein Annotationstool für HTML -Video- und Bildelemente. Mit dem Tool können Benutzer mit verschiedenen Zeichenwerkzeugen, einschließlich Kurven, Rechtecke, Ellipsen und Texten, über Video und Bilder mit verschiedenen Zeichenwerkzeugen zeichnen und kommentieren. Benutzer können auch die Farbe und die Strichgröße ihrer Anmerkungen anpassen.

Demo: lifeart.github.io/sm-annotate

Merkmale

Zeichnen und Annotieren von Video- und Bildelementen.
Mehrere Zeichenwerkzeuge (Kurve, Rechteck, Ellipse und Text).
Anpassbare Farbe und Hubgröße für die Anmerkungen.
↩ Funktionalität rückgängig.
Serialisierung und Deserialisierung von gezogenen Formen.
Skalierung von Formen zur aktuellen Leinwandgröße.
⌨ Tastaturverknüpfungen für Rückgängigmachen (Strg/CMD + Z).
Ereignisbehandlung für Zeigerveranstaltungen (Maus und Berührung).
Wiedergabe von kommentierten Frames als Video.
Speichern des aktuellen Rahmens oder alle Frames mit Anmerkungen.
Video -Overlay -Komparsion

Zusätzliche Vorteile

Null Abhängigkeiten.
Unterstützung für mobile Geräte.
Leistungsstarkes Plugin -System.
Geschrieben in TypeScript.

Erste Schritte

Fügen Sie das Paket mit Garn zu Ihrem Projekt hinzu:

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

Verwendung

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

Benutzer können mithilfe der verfügbaren Tools (Kurve, Rechteck, Ellipse und Text) zeichnen und kommentieren und die Farbe und die Hubgröße der Anmerkungen anpassen. Das Tool unterstützt auch die Funktionalität und die Ereignisbehandlung für Zeigerveranstaltungen (Maus und Berührung).

Verwenden Sie den aktuellen Frame oder alle Frames mit Anmerkungen, verwenden Sie die Methoden saveCurrentFrame oder saveAllFrames .