이미지 주석 도구 - 미리보기에서 이미지를 주석할 수 있습니다

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 · GitHub

Demo Video

46개의 좋아요

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

9개의 좋아요

Thank you very much. It is awesome

7개의 좋아요

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:

4개의 좋아요

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.

8개의 좋아요

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

3개의 좋아요

Is there a feature that can be scribbled on a photo

4개의 좋아요

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!

4개의 좋아요

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

3개의 좋아요

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

4개의 좋아요

Currently there are no features of that kind.

4개의 좋아요

Write images error

ftOaYJktEr

2개의 좋아요

이 이슈를 #customization:theme:broken-theme으로 옮기고, pr-welcome 태그를 추가했습니다.

적절한 권장 테마 컴포넌트가 되려면 상당한 작업과 지원이 필요하다고 생각합니다.

6개의 좋아요

I fixed some issues with annotating the images.
This is the link to the PR:
https://github.com/discourse/discourse-image-annotator/pull/49#issue-655300799

6개의 좋아요

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

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?

6개의 좋아요

Here is the link for the PR for removing Jquery:

7개의 좋아요

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

9개의 좋아요

I will look into it as soon as possible!

6개의 좋아요

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

9개의 좋아요

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.

9개의 좋아요