(alpha) Image Annotator - Annotate images right inside the previewer!

Customization Theme component

AI-generated summary

labofoz has released an alpha version of the Image Annotator theme component, which allows users to annotate images directly in the previewer. The annotator uses Marker.js and allows users to add boxes, shapes, arrows, and text to images, as well as highlight or censor parts of the image. The annotated image can then be copied and pasted into the editor, uploading the edited image.

Several users have expressed interest in the component, including nexo, Anatolia, and Chaboi_3000. However, some have noted bugs and limitations, such as the requirement to copy and paste the annotated image, which sam and nexo have suggested could be improved.

labofoz has announced plans to rewrite the component from scratch, incorporating user feedback and improving mobile support. davidkingham and labofoz have also discussed the possibility of adding cropping functionality.

However, it appears that the original repository link is broken, and labofoz has not updated the link. Joshua_Kogan, Chaboi_3000, and vliboolean1010 have all requested an update on the repository link.

In the meantime, nathank has suggested an alternative Image Annotator theme component that can be found on Meta Discourse.

1

(no audio)

623×623 28.8 KB

Image Annotator (alpha/preview)

Repo: https://github.com/labofoz/discourse-image-annotator
Install Branch: discourse
Component size: ~42Kb
Dependes on Marker.js: see their license (requires attribution or purchase)

So I’ve been using my Discourse as a hackable Evernote alternative, but one of the features I really miss is image annotation. This Discourse Theme Component adds Marker.js to your topic previewer, making it so that whenever you click on an image it activates “Annotation Mode”, allowing you to:

  • Add boxes, shapes, arrows, and text
  • Highlight or censor parts of the image
  • Copy the annotated image to clipboard
  • Paste the image back into the editor, allowing to either keep or delete the original
  • Mobile support soon

Because you copy the image from the previewer back into the editor, it’ll automatically upload the edited image as any other copy/pasted image!

There aren’t any optimizations yet and it’s basically just a bundled copy of the Marker.js repo. There might be bugs and I’m still evaluating different annotation libraries, but that’s the sneak peak!

Install Screen

I’m still experimenting so for now make sure to use the discourse branch, as the main branch is where the main source is (I’ll fix this soon):

image
image690×370 43.3 KB

48 Likes
2

Wow, that looks incredibly useful - I could imagine it has more uses than simply annotating (memes :wink: ). Excellent, I’m super proud and impressed of the continuous stream of talent and innovation that’s coming from the Discourse community! :trophy:

3 Likes
3

As if you brought MS Paint into Discourse :slight_smile: This looks really good.

2 Likes
4

Very cool! can this be done without the cut-paste step at the end? Just trigger the upload direct once editing is done?

14 Likes
5

Yeah, this is the only hindrance I see.

1 Like
6

Sounds awesome! This is going to be added to our forum soon! I think it might be cool if you can crop images. Anyways, great job @labofoz! Though, I do understand this is a theme component for annotating.

5 Likes
7

That’s a great point! I think it’s definitely possible but I think I’m going to do a more complete discourse integrated one from scratch over the weekend. I have a few other components I’m working on and I’d like to just reuse the dependencies Discourse already has.

The more I experiment the more I think I can get this down to just a few Kb vs 42, and with better integration and mobile support!

That’s a great point and definitely on my mind, I wanted to drag and drop collages together on the go so I’ll give this a try over the weekend too!

17 Likes
8

Incredible. Love it!

1 Like
9

Very cool! I would love to use this, it has a lot of glitches but I’ll hold back feedback if you’re going to re-write it from scratch. Would love to see cropping as well. Looking forward to see where this goes :+1:

2 Likes
10

Thanks! I released this a bit early to collect feedback ahead of time so feel free to list anything you find

Cropping is a great suggestion (especially for mobile users), so I’ve added that to my todo! I should have the first production ready version by eod Sunday. I’m just planning everything out now because I’d like it to be super simple for end users to use (like it’s not even there)

8 Likes
11

It’s just a bit clunky right now, like the toolbar doesn’t always show up, the annotations move when you scroll, sometimes a new annotation doesn’t appear in the visible window and you have scroll down or make the composer bigger to find it. The finish checkbox does nothing for me, so the copy/paste functionality doesn’t work. If you close the composer window the annotation still stays until you X out of the annotation bar.

2 Likes
12

Thanks that’s good feedback, I’m just going to do it from scratch as it would be less work for me than debugging it. There’s definitely some interest so I’ll work on a new version with everyone’s feedback over the weekend!

6 Likes
13

Hi! Nice plugin!

But it’s not working on our community :sweat_smile:
Console reports this:

/theme-javascripts/03bd904a31a109db9cd635a25a5c572d54442e65.js?__ws=community.kodular.io:2 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at Image.a.onload (https://community.kodular.io/theme-javascripts/03bd904a31a109db9cd635a25a5c572d54442e65.js?__ws=community.kodular.io:2:3725)

Any idea what can be causing this?

14

Hi, thanks for reporting this! From that alone I wouldn’t be able to tell, but I should have the newer version out either tonight or tomorrow (probably tomorrow)

I mostly made this for myself using off the shelf tools just to see if the idea would work out, so I didn’t test this too much. I’ll post back when I have the update (which will probably be quicker to fix anyways :sweat_smile: )

8 Likes
15

Hey everyone, I’m still working on this but I’ve been trying to find a job too so I’m a little behind. I ended up learning the Discourse API and moved everything into a modal so that it’ll work on mobile devices too, is compatible with whatever theme you already have, and should be future compatible with Discourse.

I’ve also made progress on autosaving, which you can see in this video. The project will also be less than 5kb (since it uses Discourse’s core dependencies) and I’m trying to learn best practices, so you’ll have plugin hooks etc if you’d like to extend the annotator.

I should have this ready for sure by Sunday, but just wanted to give a quick update!

20 Likes
16

Hi @labofoz, has there been any updates on this? It seems that your github link is broken, and I couldn’t find your username there, either.

17

Temporary moved to the #customization:theme:broken-theme category until the component is fixed.

7 Likes
18

I loved this theme, and I want to keep using it. @labofoz can you update the link or was the repository removed?

2 Likes
19

Would love to see this resuscitated!

1 Like
20

this feature would be great

1 Like