NaturalIntelligence/imglab

Magic/Smart selection on mouse click on HTML canvas

Open

#64 opened on Jul 4, 2018

View on GitHub
 (1 comment) (0 reactions) (0 assignees)HTML (930 stars) (560 forks)batch import
enhancementfirst-timers-onlygood first issuehelp wanted

Description

For the sake of laziness, we were wondering to introduce a smart selection tool which can automatically create a polygon and select particular part of an object.

How to

  1. workarea.tag.html load the image on hidden canvas.
  2. When smart selection tool is selected then select the area and convert it into either SVG path or SVG polygon.

Watch for changes, or Bookmark for easy discovery. Fund this project for new features and maintenance. [Showcase] your project with us by raising an issue

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Contributor guide

Tech stack
javascripthtml
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
needs investigation
Prerequisites
HTML CanvasJavaScriptSVG basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
25
Research direction
First, examine the existing codebase, particularly `workarea.tag.html` and related JavaScript files to understand how images are loaded on a hidden canvas and how other selection tools (e.g., polygon, rectangle) are implemented. Then, research smart selection algorithms like edge detection or flood fill commonly used in image editing software. Finally, consider implementing a simple polygon drawing tool initially, then layer on 'smart' snapping to object edges using canvas pixel analysis.