Image Annotation

(James) #1


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


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