https://github.com/lifeart/sm-annotate

Vector Annotation tool for Video & Image files
https://github.com/lifeart/sm-annotate

annotate-images annotation-tool canvas cgi image-annotation-tool typescript vector video-annotator

Last synced: 22 days ago
JSON representation

Vector Annotation tool for Video & Image files

• Host: GitHub
• URL: https://github.com/lifeart/sm-annotate
• Owner: lifeart
• Created: 2023-04-08T06:51:17.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-11-20T13:50:09.000Z (about 1 year ago)
• Last Synced: 2024-10-02T12:21:10.608Z (3 months ago)
• Topics: annotate-images, annotation-tool, canvas, cgi, image-annotation-tool, typescript, vector, video-annotator
• Language: TypeScript
• Homepage: https://lifeart.github.io/sm-annotate/
• Size: 3.01 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Video and Image Annotation Tool

This project provides an annotation tool for HTML video and image elements. The tool allows users to draw and annotate over video and images using various drawing tools, including curves, rectangles, ellipses, and texts. Users can also customize the color and stroke size of their annotations.

Demo: [lifeart.github.io/sm-annotate](https://lifeart.github.io/sm-annotate/)

## Features

* ✍️ Drawing and annotating over video and image elements.

* 🛠️ Multiple drawing tools (curve, rectangle, ellipse, and text).

* 🎨 Customizable color and stroke size for the annotations.

* ↩️ Undo functionality.

* 🔗 Serialization and deserialization of drawn shapes.

* 📏 Scaling shapes to the current canvas size.

* ⌨️ Keyboard shortcuts for undo (Ctrl/Cmd + Z).

* 🖱️ Event handling for pointer events (mouse and touch).

* 🎞️ Playback of annotated frames as video.

* 💾 Saving the current frame or all frames with annotations.

* 🎞️ Video Overlay comparsion

## Additional Benefits

* 🚀 Zero dependencies.

* 📱 Support for mobile devices.

* 🔌 Powerful plugin system.

* 📘 Written in TypeScript.

## Getting Started

Add the package to your project using yarn:

```bash

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

```

## Usage

```javascript

import { SmAnnotate } from '@lifeart/sm-annotate';

const video = document.getElementById('video');

const annotationTool = new AnnotationTool(video);

```

Users can draw and annotate using the available tools (curve, rectangle, ellipse, and text) and customize the color and stroke size of the annotations. The tool also supports undo functionality and event handling for pointer events (mouse and touch).

To save the current frame or all frames with annotations, use the `saveCurrentFrame` or `saveAllFrames` methods, respectively.

## Hotkeys

### Curve tool

| KeyCode | Result |

| - | - |

| `Shift` | Magnifier x2 |

| `r` | Red color |

| `g` | Green color |

| `b` | Blue color |

| `y` | Yellow color |

| `1` - `9` | Tool size |

## Contributing

We welcome contributions to improve the project. Please feel free to submit issues or pull requests for consideration.

## License

This code is allowed for non-commercial use. For commercial use, users must contact the author.