Image Annotation


(James) #1

Hi,

First post, apologies if in wrong section.

Something I like to do is write tutorials / guides on how to do things. As part of the process I may include a lot of screenshot’s with markup (I currently use macOS preview), to give a visual representation of what I’m talking about.

It would be really cool and a huge time saver in this use case if there was a built in tool for annotating images (Arrows, Rectangles, Numbers etc…)

Im not sure the best method of implementing this (I’m new, don’t understand all the workflow / features yet). In an ideal world, I would see my image in the preview and when hovering over the image in the preview I would see a ‘Markup’ button to allow me to Markup the image.

I created a few mockups to try and visualise what I am saying. Unfortunately, being a new user I can only submit 1 image per post, so I have had to separate the posts for each image. If a moderator wants to merge them all into the original post, that would be good.

1 - Source Image


(James) #2

2 - Image preview has a markup button


(James) #3

3 - Clicking Markup button displays a markup toolbar


(James) #4

4 - Using the markup tools, finished result

Would something like this be possible? It would make the workflow for writing guides so much smoother and productive.

Kind Regards.


(Jeff Atwood) #5

Annotating images would likely need to be a plugin.


(James) #6

Thanks.

Ive always wanted to dabble in web development, this is maybe something I could look into when I have some spare time.

I have previous software development experience, although I would need to refresh my skills somewhat. On a scale of 1-10, how difficult would you envisage something like this to implement ?

Thanks again.


(Sam Saffron) #7

Highly depends on your background. Integrating a 3rd party service is probably a 3/10, building a full on annotation UI using canvas allowing for all web browser quirks is probably a 7-8/10