Draw Polygon on image and get coordinates
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need to be able to load an image and then draw a 4 point polygon on the image and get the coordinates. The precision of the point is a big deal so it would be ideal if we could have a zoomed window where the cursor is. (the best example i could find is from snagit as seen here https://www.dropbox.com/s/kq5459z62pq4dyx/2020-02-18_13-27-16.png?dl=0 )

thinking something similar to this lib


but with the ability to have that zoomed context and maybe the crosshairs

coordinates of the 4 points can be shown anywhere on the page as long as we can copy them out after we place the 4th point.

this bounty is for a codepen or jsfiddle of a html page i can load a local image to, and then drop 4 precise points to get a polygon on the image and then be able to get the coordinates that were placed.

a 4 point polygon, should be a rectangle i think. are you looking for a rectangle? or they could be spread randomly? i have an app that i'm using, it allow me to select an area from a webpage to screenshot it by selecting it. i have made a screenshot about it, does it seems to be what you want? link: https://i.ibb.co/3dG9psJ/image.png
Chlegou 1 month ago
good question. i don't need it to specifically be a rectangle but if its easier at all then we can make that work!
Qdev 1 month ago
awarded to B44ken

Crowdsource coding tasks.

2 Solutions


you can download the html file and it will also allow you to use on local.

Winning solution

This is my current, incomplete, solution. You can provide a new image with the newImage(src) function, provinding a URL to an image online. There are a few things I haven't done yet, below. Let me know if I forgot something:

  • [DONE] Supply image from computer
  • [DONE] Put a dot on the most recent click point
  • Show zoom preview somehow
hey there - do you think you have a solution for the zoom window?
Qdev 1 month ago
I can get that done.
B44ken 1 month ago
View Timeline