Image Annotator - Allows you to annotate images in the previewer

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

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

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

3 Likes

I have problem cannot done.

1 Like

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 Likes

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 Like

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.

2 Likes

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

2 Likes

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

1 Like

Try setting that up and rebuilding.

2 Likes

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

1 Like

I have problem cannot edit done.

2021-09-20_16-46-24

1 Like

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 Like

Try click out to done your current edit tool, before save your image.

1 Like

It seems depends on paragraph/image below current image. If content next to image is null (or heading), it will not able to complete action or replace next image.

1 Like

This TC is brilliant - but I’ve noticed an error in the browser console which seems to be associated with it:

image

It still seems to work though so this is no big deal.

Also, I do wonder if it would be better if the options to crop and edit tied in better with the new ‘edit the title’ functionality, perhaps with an icon or two next to those ones instead. It is a bit of a clash when hovering gives one lot of options and clicking another!

image

1 Like

Editing works, but it didn’t save and I got this CSP related error:


Message

CSP Violation: 'eval' 

(a=0)=>{let b;const c=class{};}

Backtrace

/var/www/discourse/app/controllers/csp_reports_controller.rb:14:in `create'
/var/www/discourse/vendor/bundle/ruby/2.7.0/gems/actionpack-7.0.3/lib/action_controller/metal/basic_implicit_render.rb:6:in `send_action'
/var/www/discourse/vendor/bundle/ruby/2.7.0/gems/actionpack-7.0.3/lib/abstract_controller/base.rb:215:in `process_action'
/var/www/discourse/vendor/bundle/ruby/2.7.0/gems/actionpack-7.0.3/lib/action_controller/metal/rendering.rb:53:in `process_action'
/var/www/discourse/vendor/bundle/ruby/2.7.0/gems/actionpack-7.0.3/lib/abstract_controller/callbacks.rb:234:in `block in process_action'
/var/www/discourse/vendor/bundle/ruby/2.7.0/gems/activesupport-7.0.3/lib/active_support/callbacks.rb:118:in `block in run_callbacks'
/var/www/discourse/app/controllers/application_controller.rb:415:in `block in with_resolved_locale'
/var/www/discourse/vendor/bundle/ruby/2.7.0/gems/i18n-1.10.0/lib/i18n.rb:328:in `with_locale'
/var/www/discourse/app/controllers/application_controller.rb:415:in `with_resolved_locale'
/var/www/discourse/vendor/bundle/ruby/2.7.0/gems/activesupport-7.0.3/lib/active_support/callbacks.rb:127:in `block in run_callbacks'

I tried iPad and iPhone, and I’m using S3 — if any of those plays some roll.

1 Like

CSP situation is resolvable with the new patterns used in:

Would love to see a PR that adds this in.

3 Likes

Hello, very useful component. Is it possible to add a circular crop to an image?