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

I updated it to markerjs2 and cleanup the codes.
Here is the link for the PR:
https://github.com/discourse/discourse-image-annotator/pull/52

7개의 좋아요

에디터 개선이 정말 훌륭하고, 코드도 많이 줄었습니다 :clap:

불행히도 편집을 저장한 후 마크다운이 정확하지 않아 게시물이 더 이상 표시되지 않습니다. 문자열 파싱이 제대로 작동하지 않는 것으로 보입니다.

위 이미지의 마크다운은 편집 전 파일입니다. 편집 후 파일名の (1) 부분이 업로드 경로에 잘못 포함되는 것을 볼 수 있습니다. (1upload 부분을 확인해 보세요. 이제 테마에 JS 테스트를 추가할 수 있으므로, 파일 이름 파싱에 대한 테스트를 추가합시다.

이 문제가 수정될 때까지 메타에서 테마 구성 요소를 잠시 비활성화할 것입니다. 이미 #customization:theme:broken-theme로 표시되어 있으니 새로운 문제는 아닙니다 :slight_smile:

7개의 좋아요

I fixed the bug catching wrong parentheses when finding image url.
Here is the link for the PR:
https://github.com/discourse/discourse-image-annotator/pull/53

I am also planning to add a function when hovering over the image the user can choose whether to annotate it or crop (rotate/flip) it.

6개의 좋아요

Hi Nam,

Component is now installed on meta and I was testing it out!

Some feedback:

  1. It is unclear how to open up the editor. I would recommend some indication here (maybe float the word edit? or a pencil? in the preview area):

  1. There is a big z-index fight with the composer leaving the image behind the composer. You have to shrink the composer way down to see it all.

  2. Images being edited seems enormous. Any way to keep dimensions of image being edited?

6개의 좋아요

Thank you so much for the feedback!
I am working on the feedback #1. I will change the style of them but the ‘ANNOTATE’ or ‘CROP’ button will open up the requested tool.

For feedback #2, could you clarify the issue for me?

I can work on #3 soon.

6개의 좋아요

Sure:

The composer is rendered on top of the image editor for me, so I can not edit properly till I shrink the composer.

Thanks heaps for all you awesome work here!

3개의 좋아요

Thank you for your clarification!
Could you tell me which device, browser, and version you used?
The editor pops up on top of the image editor for me. This is how it looks on mine:

4개의 좋아요

Oh I see what is going on here, can you test with the “focused sidebar” theme which is only enabled for the Discourse team (and part of Discourse for Teams)

My guess is that you need to push the zindex up a tiny bit more. @markvanlan is helping out here.

4개의 좋아요

@Nam Merged in an awesome change allowing crop/rotate. There is now a selection stage after you click an (local upload only) image, to either annotate or crop/rotate. :clap:

The only issue right now is another z-index issue but with the cropping modal (the annotating modal z-index is correct). There is no stable className on the outer element for the cropping modal, so I have a PR open for the cropro library to add one.

Edit:
I forked the repo and made the small change we need. No more z-index issue.

4개의 좋아요

It seems like there is no solution for the issues that images being edited are too big.
It’s because the MarkerJs and Cropro set the image size when it is being edited.

3개의 좋아요

I have problem cannot done.

1개의 좋아요

It’s been a year so I’ll ask in desperation again because this has so much potential, any hope for images hosted on s3 and using a cdn? :grin:

2개의 좋아요

Meta uses S3 and CDN and it works just fine if you are uploading the image at the same time you want to edit it. AFAIK it won’t work while editing existing images.

1개의 좋아요

Interesting, I tried it on another site which currently has all plugins and TCs disabled and I have the same problem, but it works with s3 disabled, any ideas? The image is also oddly stretched out, should be 2:3 but it’s stretching to the width of the screen.

3개의 좋아요

Do you have DISCOURSE_ENABLE_CORS: true in your app.yml ?

2개의 좋아요

No I don’t have that line, and nothing set in cors-origins site setting either.

1개의 좋아요

Try setting that up and rebuilding.

2개의 좋아요

Still happening after enabling/rebuilding, do I need to set anything for cors-origins or DISCOURSE_CORS_ORIGIN: ?

1개의 좋아요

I have problem cannot edit done.

2021-09-20_16-46-24

1개의 좋아요

When I try this on smartphone, it does not edit current image, and replace next image (next to current).

Could you check for this?

1개의 좋아요