Image Annotation

ميزة
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

Annotation%20-%20Source%20Image
Annotation - Source Image.png1104×439 54 KB

إعجاب واحد (1)
2

2 - Image preview has a markup button

Annotation%20-%20Markup%20Button
Annotation - Markup Button.png1104×439 55.3 KB

3

3 - Clicking Markup button displays a markup toolbar

Annotation%20-%20Markup%20Toolbar
Annotation - Markup Toolbar.png1104×469 60.8 KB

4

4 - Using the markup tools, finished result

Annotation%20-%20Completed
Annotation - Completed.png1104×439 59.3 KB

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

Kind Regards.

إعجاب واحد (1)
5

Annotating images would likely need to be a plugin.

3 إعجابات
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.

إعجاب واحد (1)
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

5 إعجابات