lifeart / sm-annotate Goto Github PK

Vector Annotation tool for Video & Image files

Home Page: https://lifeart.github.io/sm-annotate/

TypeScript 100.00%

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

sm-annotate's Introduction

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

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:

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

Usage

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.

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.

sm-annotate's People

Contributors

Stargazers

Watchers

// Assuming img1 and img2 are your two images and they have the same dimensions
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img1.width;
canvas.height = img1.height;

ctx.drawImage(img1, 0, 0);
let imgData1 = ctx.getImageData(0, 0, canvas.width, canvas.height);

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img2, 0, 0);
let imgData2 = ctx.getImageData(0, 0, canvas.width, canvas.height);

let imgDataResult = ctx.createImageData(canvas.width, canvas.height);

for (let i = 0; i < imgData1.data.length; i += 4) {
  let r1 = imgData1.data[i];
  let g1 = imgData1.data[i + 1];
  let b1 = imgData1.data[i + 2];
  
  let r2 = imgData2.data[i];
  let g2 = imgData2.data[i + 1];
  let b2 = imgData2.data[i + 2];
  
  // calculate the color difference
  let diff = Math.abs(r1 - r2) + Math.abs(g1 - g2) + Math.abs(b1 - b2);
  
  if (diff == 0) {
    // the pixels are the same, set to grayscale
    let grayscale = 0.3 * r1 + 0.59 * g1 + 0.11 * b1;
    imgDataResult.data[i] = grayscale;
    imgDataResult.data[i + 1] = grayscale;
    imgDataResult.data[i + 2] = grayscale;
  } else {
    // the pixels are different, set to blue or red
    imgDataResult.data[i] = r1 > r2 ? 255 : 0; // red channel
    imgDataResult.data[i + 1] = 0; // green channel
    imgDataResult.data[i + 2] = r1 < r2 ? 255 : 0; // blue channel
  }
  imgDataResult.data[i + 3] = 255; // alpha channel
}

ctx.putImageData(imgDataResult, 0, 0);

duration: 1
frame: 16

https://github.com/naomiaro/waveform-playlist
https://www.npmjs.com/package/webaudio-peaks
https://codesandbox.io/s/react-waveform-playlist-yv6ytp?file=/src/components/Channel.js
https://github.com/chrisguttandin/standardized-audio-context
https://stackoverflow.com/questions/49140159/extracting-audio-from-a-video-file

class VisualComparator {
 constructor(videoElement1, videoElement2, canvasElement, leftOpacity = 1, rightOpacity = 1) {
    this.video1 = videoElement1;
    this.video2 = videoElement2;
    this.canvas = canvasElement;
    this.ctx = this.canvas.getContext('2d');
    this.comparisonLine = this.canvas.height / 2;
    this.leftOpacity = leftOpacity;
    this.rightOpacity = rightOpacity;

    this.initEventListeners();
    this.draw();
  }

  initEventListeners() {
    this.canvas.addEventListener('mousemove', this.updateComparisonLine.bind(this));
    this.video1.addEventListener('play', () => {
      this.video2.currentTime = this.video1.currentTime;
      this.video2.play();
    });
    this.video1.addEventListener('pause', () => this.video2.pause());
    this.video1.addEventListener('seeked', () => {
      this.video2.currentTime = this.video1.currentTime;
    });
  }

  updateComparisonLine(event) {
    const rect = this.canvas.getBoundingClientRect();
    const y = event.clientY - rect.top;
    this.comparisonLine = y;
  }

  draw() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

    this.ctx.globalAlpha = this.leftOpacity;
    this.ctx.drawImage(
      this.video1,
      0, 0, this.canvas.width, this.comparisonLine,
      0, 0, this.canvas.width, this.comparisonLine
    );

    this.ctx.globalAlpha = this.rightOpacity;
    this.ctx.drawImage(
      this.video2,
      0, this.comparisonLine, this.canvas.width, this.canvas.height - this.comparisonLine,
      0, this.comparisonLine, this.canvas.width, this.canvas.height - this.comparisonLine
    );

    this.ctx.globalAlpha = 1;
    this.ctx.beginPath();
    this.ctx.moveTo(0, this.comparisonLine);
    this.ctx.lineTo(this.canvas.width, this.comparisonLine);
    this.ctx.strokeStyle = 'red';
    this.ctx.stroke();

    requestAnimationFrame(this.draw.bind(this));
  }
}

<video id="video1" src="path/to/video1.mp4" controls></video>
<video id="video2" src="path/to/video2.mp4" controls style="display:none;"></video>
<canvas id="comparisonCanvas" width="640" height="360"></canvas>

const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');
const comparisonCanvas = document.getElementById('comparisonCanvas');
const leftVideoOpacity = 0.7;
const rightVideoOpacity = 0.7;

const visualComparator = new VisualComparator(video1, video2, comparisonCanvas, leftVideoOpacity, rightVideoOpacity);