Image Annotator - Allows you to annotate images in the previewer

I updated it to markerjs2 and cleanup the codes.
Here is the link for the PR:

6 Likes

The editor improvements are fantastic, and it removed so much code :clap:

Unfortunately, after saving the edit, the post is no longer showing up, as the markdown isn’t quite right. It looks like the string parsing is not correct.


The top image markdown is the uneditted file. After editing you can see that the component is getting confused from the (1) in the filename and putting that into the upload path, look at (1upload. Now that themes can have JS tests, lets add a test for the file name parsing.

I am going to disable the theme component here on Meta for a bit while this gets fixed. It’s already marked as #theme:broken-theme so nothing new here :slight_smile:

4 Likes

I fixed the bug catching wrong parentheses when finding image url.
Here is the link for the PR:

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.

5 Likes

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?

4 Likes

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.

5 Likes

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!

2 Likes

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:

3 Likes

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.

3 Likes

@GH_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.

3 Likes

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.

2 Likes