sm annotate

視頻和圖像註釋工具

該項目為HTML視頻和圖像元素提供了註釋工具。該工具允許用戶使用各種繪圖工具（包括曲線，矩形，橢圓機和文本）在視頻和圖像上繪製和註釋。用戶還可以自定義註釋的顏色和中風大小。

演示：lifeart.github.io/sm-annotate

特徵

• 繪製和註釋視頻和圖像元素。
• 多個繪圖工具（曲線，矩形，橢圓和文本）。
• 註釋的可自定義顏色和中風大小。
• ↩撤消功能。
• 繪製形狀的序列化和避難所化。
• 將形狀縮放到當前的畫布大小。
• ⌨撤消的鍵盤快捷鍵（CTRL/CMD + Z）。
• 用於指針事件的事件處理（鼠標和触摸）。
• 帶註釋的幀作為視頻的播放。
• 保存當前的幀或所有框架。
• 視頻疊加量

其他好處

• 零依賴性。
• 支持移動設備。
• 功能強大的插件系統。
• 用打字稿編寫。

入門

使用紗線將包裹添加到您的項目中：

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	工具尺寸

貢獻

我們歡迎捐款改善項目。請隨時提交問題或提取請求以進行考慮。

執照

此代碼可用於非商業用途。對於商業用途，用戶必須與作者聯繫。