Skip to content

d4wei/react-pixel-annotation-tool

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pixel Annotation Tool in React

Introduction

It's a React version of PixelAnnotationTool. The implementation borrows ideas from different repos, including:

The tool also uses many excellent packages, such as:

Demo

UI Overview

alt text

Draw and Generate Mask

Alt Text

How to use

Installation

npm install

Run the App

npm start

Next steps (Roadmap)

  • Improve the speed of watershed part. Currently, the rendering of colorful mask is done in pure javascript and can be slow.
  • Support redo / undo at line level.
  • Disable anti-aliasing for canvas shape (lines), or reimplement the line rendering algorithm.
  • Support polygon tool.
  • Overlay generated mask to image.
  • Allow loading images from local folders and provide preview of next images.
  • Add interface to allow custom save, e.g. save to a database.

References

OpenCV related

  1. https://aralroca.com/blog/opencv-in-the-web
  2. https://github.com/echamudi/opencv-wasm

Anti-aliasing related

  1. https://medium.com/@kozo002/how-to-draw-without-antialiasing-on-html5-canvas-cf13294a8e58
  2. konvajs/konva#695

Memory-leak related

  1. opencv/opencv#15060

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 75.6%
  • CSS 19.0%
  • HTML 5.4%