Image Annotator - Allows you to annotate images in the previewer

Hi everyone,

Along with my teammate @vliboolean1010, we’re excited to introduce you to the newly created Discourse Theme-Component, Image Annotator.

Whenever you click on the image at the editor, it activates the features of

  • Add boxes, shapes, arrows, and text
  • Highlight or censor parts of the image
  • Select and change the color of the annotations
  • Annotated images will be automatically updated after clicking on the save.
  • Supports browsers including Safari, Firefox, Chrome & iOS Safari
  • (Image cropping feature is working in progress)

Install Screen

Repo: GitHub - discourse/discourse-image-annotator: image annotation theme component

Demo Video

32 Likes

Nice work! Has this been tested with images hosted on s3? I’m getting a cross origin request error when s3 is enabled.

9 Likes

Thank you very much. It is awesome

7 Likes

Hi @davidkingham,

Thank you for the detailed reporting of the issue. As we are trying to solve this issue, one alternative solution will be uploading the image from your local devices, instead of uploading it from online sources. :slight_smile:

3 Likes

Thanks Chun, but that’s not the same thing. I am uploading from a local device but the image is being uploaded to an s3 endpoint and that’s where the problem comes in.

6 Likes

I’m thinking this could be used to automatically watermark photos by username, but I’m not sure how to go about that. Perhaps another button that prints [username]@[site domain]?

2 Likes

Is there a feature that can be scribbled on a photo

3 Likes

So here’s my problem. When I upload a large image (say, a screenshot of our forum for a tutorial) it automatically restricts the image display based on my max image settings. This is a problem because if it’s a large image, then it resizes it to impossibly small, and I can’t edit the larger version.

Basically, this restricts it to being useful only for images smaller than oneboxed settings; ours are (for example) set to 400 x 400.

In this image, these are the same two images, one edited with this component. The component renders it illegible.

If you could set it up so it can edit the original image, not the oneboxed version, that be absolutely stellar.

Great start though, and I definitely see its utility!

3 Likes

Is it possible to edit annotations after the post has been saved?

2 Likes

IT doesn’t look like it. It re-saves the image when you’re done editing.

3 Likes

Currently there are no features of that kind.

3 Likes

Write images error

1 Like

I have moved this to #theme:broken-theme and adding the #pr-welcome tag on it.

I feel it needs a fair bit of work and support to be a proper recommended theme component.

2 Likes

I fixed some issues with annotating the images.
This is the link to the PR:

5 Likes

Awesome, thanks Nam. It doesn’t error anymore and does save the image, so that’s cool

PXL_20210427_020722114

I did notice while creating the masterpeice above, that there are quite a few little annoying things about using this. A number of times I had the annotation initialize at the wrong area. The toolbar but also the editing area were shifted half-way down the page. Do you think you can track down why this is happening?

5 Likes

Here is the link for the PR for removing Jquery:

6 Likes

I wonder if we can add “crop” and “rotate” controls to the component, seems like something that would be super useful.

5 Likes

I will look into it as soon as possible!

5 Likes

No rush at all, very excited to see this component getting some attention, it has so much potential.

5 Likes

While working with @markvanlan, we realized there is a new version of markerjs.
Images can be edited in the popup. This will take care of a lot of issues.
I’m working on a PR now.

8 Likes