The Image Annotator is a new Discourse Theme Component developed by chz062009 and vliboolean1010, allowing users to annotate images directly in the previewer with tools like boxes, arrows, text, and color customization. It supports major browsers and auto-saves annotations. A demo video and install screen are provided, with the repo hosted on GitHub. Early testing by davidkingham revealed cross-origin issues with S3-hosted images, later clarified as a local upload-to-S3 issue. Nam submitted multiple PRs to fix bugs, including one to remove jQuery and another to upgrade to markerjs2, which significantly reduced code and improved the editor. However, markvanlan reported UI glitches like misaligned toolbars and annotation placement, which Nam pledged to investigate. A critical bug was found where the component misparsed filenames with parentheses (e.g., (1)), corrupting markdown paths — Nam fixed this and plans to add hover-based options for annotation or cropping. sam praised the component’s potential and, after re-enabling it on Meta, provided UX feedback: unclear editor activation (suggesting a floating “Edit” or pencil icon), z-index conflicts with the composer requiring it to be minimized, and oversized edited images — suggesting preserving original dimensions. The component remains under active development with community collaboration.
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.
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.
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]?
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.
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?
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.
