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

20 Likes

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

7 Likes

Thank you very much. It is awesome

5 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:

2 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.

4 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]?