Forum Documentation Showcase Pricing Learn more

Croppie - element plugin to crop and zoom images before upload

#104

Hi @mishav

Thanks for this great plugin. I am implementing it now in a mobile site and noticed something out of the ordinary.

When i load a picture to the croppie and rotate the phone to go into landscape mode the picture that i loaded disappears.

I load it again and rotate the phone to go on portrait mode and the picture disappears again.

So every time I rotate the phone the picture goes away and I have to load it again over and over again.

Is this a normal behavior of the plugin?

Thanks,
Neysha

0 Likes

#105

Hi @neysha

This would happen if the croppie element gets told to update, and its settings are different from before the device rotation.

I don’t see that happening on the below example, with both a Samsung Ace 3 / Chrome and iPad2 / Safari.

Which phone OS/browser are you using?

Does it happen with your phone on the following page? https://croppie-another-example.bubbleapps.io/version-test

If the above page works, have a look at its settings to compare to what you have … https://bubble.is/page?name=index&id=croppie-another-example&tab=tabs-2

0 Likes

#106

Hi @mishav

With your help I figured out why I was having the behavior that I described in my last post. When I set the page “Make this element fixed-width” to true the croppie does not goes blank again when i rotate the phone. But if it is set to false it will go blank.

Try it with the example page that you sent me. I’ll be waiting your reply.

Thanks,
Neysha Borrero

0 Likes

#107

Thanks for setting this up, I see the same behaviour now.

One workaround is to set the croppie element as fixed-width, so that it doesn’t get resized on screen rotation.

0 Likes

#108

Hi there. Newbie here.

I’m trying to create a simple profile picture, where the user clicks on top of the image and the picture uploader is prompted for them to upload their profile picture. I was able to achieve that using bubble standard picture uploader, but the image is not cropped (of course). I learned about croppie, but I don’t see to get it working properly.

Is croppie a standalone plugin or for it to work, it has to work in conjunction with bubble’s picture uploader?

Thanks

0 Likes

#109

Hi @luiz

Croppie is a standalone element, but you’ll need to integrate it with your own workflow and your own buttons.

See the steps on the first post of this topic.

0 Likes

#110

Thanks @mishav. I was able to make it work short after I sent the message. :slight_smile:

0 Likes

#111

Hey @mishav

There seems to be a bug on the Croppie element at the moment, I’ve tried using the latest version in a fresh app to upload and save a photo, but it doesnt seem to render when loaded with an image.

Here is the preview:

And the Editor:

Cheers,

0 Likes

#112

Correction - seems to be all working now, sorry think this was an issue my end with my DNS or VPN connection causing the issue.

0 Likes

#113

Hi cool plugin thanks, how can i set state of croppie when its being interacted with.
I guess there is no style to remove the dark border square and white circle?
Im using a hack right now to style by adding an svg with difference to mask with pointer events none but im still seeing a square outline.
I want to autosave the preview which im doing every 0.1 seconds and its making app slow.
I think if it auto saved itself after interacting.
I need to be able to set a state where it will only show original image as source when its being touched, so when page is reloaded it doesnt just reset everytime.

0 Likes

#114

Hi @hikaru

The relevant classes to override styles for are:
cr-viewportx
cr-vp-squarex

and maybe
cr-overlay

For example, this causes the grey box to disappear …

$('.cr-vp-square').css('box-shadow','unset')

I suggest having a play with the styles in the browser, then figure out how to modify them for the page load.

Luke had some success with changing the styles here:

You could auto generate the preview frequently, it is a javascript function, but saving it means a server upload, which is costly in performance.

1 Like

#115

@mishav First, I got to say what an awesome plugin! It’s so comprehensive I’m surprised it’s free. :wink:
I modified it with the HTML element and css class styling and it’s just how I want it now.

One thing I noticed is that GIFs don’t really work with the uploader, is that normal?

0 Likes

#116

I tested with JPG and PNG, thanks for trying out GIF as well. If you’re interested in whether the library supports other image formats, check out the library on github. There are newer versions than I’m using here, but buggier as of a specific version.

Good you are getting some use from it!

1 Like

#117

Anybody having a centering issue on a mobile? When picture is uploaded it is not centered on a canvas like on desktop

1 Like

#118

@mishav Seems like it is possible to have an animated gif on the canvas if you disable exif and rotation. As one user did here: https://github.com/Foliotek/Croppie/issues/157. But in bubble I was not able to do this, only the first frame of the gif shows. Cropping is even more tricky it seems.

I’m wondering if there is a way to get the file value from > Browse a Croppie’s workflow?
So that if the filename contains “gif” it just saves the image directly without going though the Croppie canvas.

You can do this with a normal Image uploader. By putting the Image uploader’s value as Croppie’s dynamic image.

But this makes the process slower for normal images (jpg,png) compared to the > Browse a Croppie workflow, since it has to upload the image first. (In my testing: 3x faster for a 700kb image, even more if image is larger)

@boostsalesgroup Actually I did some further testing and it seems when the Croppie element gets resized due to screen width, uploaded images aren’t centered. Not only that, the whole image gets cropped when you save. The right side of my image has a white portion taking up 1/4 of the space (database image).

This is probably because when it resizes, only the width gets resized not height.

0 Likes

#119

Hi @mishav how do i get your plugin to upload a file? do i have to run a work flow for it to open up a file up loader? please let me know thanks

0 Likes

#120

Hi Mishav,

Just a quick question, when the action “Browse Croppie Profile Picture” runs, it obviously loads whatever image you select into the Croppie element, but is there a way to grab that filename before it’s actually saved? I couldn’t find a way of getting any of those file details.

Regards,
Paul

0 Likes

#121

Ah, I found it.
Thanks to the “Preview Croppie Profile Picture” workflow action, I hadn’t realised that when that runs, the ‘Croppie Picture’s Preview …’ data becomes populated. The filename isn’t quite right but I can work with what it produces, thanks.

0 Likes