Pixel Annotation Tool in React

Introduction

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

• react-magic-painter
• react-image-annotate

The tool also uses many excellent packages, such as:

• react-konva
• use-image
• opencv-js

Demo

Try the pixel annotation tool here

UI Overview

Draw and Generate Mask

How to use

Installation

npm install

Run the App

npm start

Next steps (Roadmap)

I supervised a few engineers in Deltron Intelligence to extend this app for production use. See the figure below:

Key technical challenges have been addressed in another of my repo: emscripten-vision-react-example

Changelog

• Solve anti-aliasing issue by using findContours and drawContours to handle pixels at edge.

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