Croppie - element plugin to crop and zoom images before upload

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:

Good stuff - the previewing before upload is super helpful :+1:

v1.1.0 New version

  • New action “Flip”, can choose either flip horizontally or vertically.

  • Auto match orientation it reads the EXIF and rotates or flips the image to orient correctly.

Enjoy : )

2 Likes

v1.2.0 New version

  • Output “Size”, shows size in bytes of the preview or save image.

  • Field “Quality” on Save/Preview, set from 0 to 1 to control compression for JPG images.

Suggested use of the Quality setting is to give the end user a slider, to choose quality between say 0.40 and 0.75, to get a decently small file size.

Then a workflow on “Slider input changed” which regenerates the preview.

1 Like

This is awesome - no need to use an API to compress. Did a few quick tests and even keeping the quality at 0.9 upon save and re-sizing 4592px X 3056px down to 1440px X 960px the file size goes from 8.6mb to 326kb :+1:

It would be great if it was possible to dynamically set a name upon save (upload to S3):
image

I realise this is probably quite a task though.

Cheers,
Luke.

1 Like

Haha, yes this is missing, thanks for the tip!

v1.2.1 new version

  • Filename on Save action

image

Thanks for the idea @luke2, it was a small change, most time taken by testing.

2 Likes

Wow, impressive turn around - thanks for implementing.

Hey @mishav

I’m not sure if this is any help or the complexity it would undertake to integrate into the plugin, but I have an idea for adding a grid to Croppie. It could be an option on the element to ‘Show grid’ and it displays with a 3x3 grid.

The workaround I guess would be to use lines or an empty repeating group as an overlay :wink:

Anyhow just a thought.

Cheers,
Luke

That’d be a big customisation, I won’t do that as a freebie. Interesting idea, what would be the use case for it?

Be sure to set the output as PNG for transparency on the Croppie element.
image

Ah fair enough.

Seeing as the preview function is built into Croppie a use case scenario could be having a user browse for a photo, the preview of the image is shown. Underneath there would be a button called Crop. Clicking this reveals the Croppie element with zoom controls and grid - user makes any adjustments then clicks the Done button, which returns back to the preview, ready to save to S3 + DB.

I guess having a grid could highlight that the image is in an ‘edit mode’.

Anyhow thanks for getting back to me.

@mishav I think I found a bug - when I use a style for a button which has a “when pressed” condition it bugs out and doesn’t open the browsing window. :slight_smile:

I use Google Chrome.

@Guru thanks for the bug report, I’ll look into it soon.