Croppie - element plugin to crop and zoom images before upload

@mishav - were you able to work on the cropping bug? Anything we can do to help?

@mishav - any ETA on the fix for the ‘white area problem’? Happy to buy you some beers/coffee for this =)

1 Like

Hello,

is it possible to use cropped image as a temp image without storing on S3? E.g. pass the viewport part of the image to some other image element on a page. Or send a cropped part to an external API for processing.

If not: does it make a cleanup of S3 storage? because users can play a lot with cropping and to store everything could result in lots of garbage.

I’m having this same issue with rotation (with EXIF on or off). An image taken in portrait on iPhone always shows up rotated to landscape in the croppie view. I rotate it back to vertical and zoom in for uploading. It appears that any portion of the image that was outside of the right edge of the original view was replaced by white space even though it displays correctly in and outside of the viewport boundary after rotation.

This doesn’t seem to be a problem when the original image capture is in “landscape” since I don’t need to rotate it.

Any ideas? I’m pulling my hair out.

@mishav - ping here again =)

@mishav

First off, this is a great plugin. Thank you for making it.

I am having few issues.

  • The Browse a Croppie is not opening the file finder in normal mode.
    Oddly when I run it in debug Step by step it works fine, switch to Normal and it does not work.
  • An odd 1 pixel whitespace appears on the right and left of the result image.
  • If Zoom is disabled it still shows a white space at the bottom where the zoom control would be

Suggestion:

  • Color options for the Zoom control, the green button does not fit my UI
  • Ability to have a Preview Result Image display realtime in another Image Holder
  • Ability to disable Zoom Control but still keep Mouse Wheel Zoom enabled.

Any thoughts?

Hi @mishav I was wondering if I could also chip in with beer/coffee money with @rushabh to get the white space bug looked into :slight_smile:

1 Like

Hi, love the plugin functionality but I’m having some photos come in upside down. Can provide some samples if you guys want to test. Not sure if anyone else is experiencing this.

After spending way too much time, I finally gave up trying to find a solution to the white space and rotation issues and just put a note above the Croppie viewport saying “for best results take a landscape photo”. Not ideal.

Gotcha, you can also put a rotation button as well if it comes in wrong which is what I ended up doing

I’ve got the rotation buttons, but when I rotate or zoom, I end up with an image with the white space along one edge. Seemed that it was more common if the original photo was portrait.

v1.0.1 New version

  • Fix to white area from rotated rectangular images.

I’d appreciate any test results.

Thank you everyone for your patience while I was away from here!

Hi Jonathan, if you could PM some sample links and steps to reproduce, I’ll have a look. Possibly the plugin might need a more recent version of the EXIF library : )

Yes, I could make it a setting to not upload to S3. And yes can expose the viewport to another element, for a preview for example, or to send somewhere else. Let me know if you want to pursue this further.

Once the upload to S3 has done, the plugin has no further control over the file, that is up to the Bubble app editor file management.

Which browser/device is this happening in? Does it happen without the debug_mode?

Are you certain that its not an artifact of the viewing of the image? I saw something similar caused by rescaling in an image element.
Can you setup a demo app which has this issue?

This is where the viewport/boundary dimensions need fiddling, for example, if I turn off the zoomer control, I set the boundary to 100% x 100%. If you can send me an example that’d help.

There is a “Custom class” option to add your own css, although I haven’t tried it myself for a long time. Yes I agree, the styling of the zoom control should be configurable.

Good idea, also suggested in earlier posts.

Mouse wheel zoom should still be enabled with “Show zoomer” off and “Zoom enabled” on.

Yes, this is a pain, I’m not sure if there’s a fix for this. Its at the browser level, where it doesn’t bother to load a file if the selection is unchanged. You’ll find the same bug on Bubble’s Image uploader.

Ah, ok. It’s no biggie :slight_smile:

@mishav Very useful!!

v1.0.2 New version

  • Preview action, outputs a cropped image that can be shown in an Image element, without uploading to S3.
  • EXIF output, mostly for diagnostics.

Don’t forget to refresh or reopen your app after upgrading a plugin.

Awesome - thanks for this update! :raised_hands: