Croppie - element plugin to crop and zoom images before upload

Would you be able to create a standalone plugin that just reads all exif data from an image?

Maybe, would the image be read in from the user’s device?

Yes. The image would be captured and read from the user’s device.

This library sounds ideal for the task:

Building an element plugin takes a lot more time than expected; I probably won’t have time to knock off a freebie during the next month.

New Version 0.6.0

  • New option “Enforce Boundary” - turn off to allow to zoom images smaller than the viewport.

Thanks for the suggestion, @anshuk

1 Like

Nice, thanks.

##New Version 0.7.0

  • New options: Size (viewport, original, custom), Size custom width, Size custom height

viewport the size of the resulting image will be the same width and height as the viewport
original the size of the resulting image will be at the original scale of the image
custom define a custom width, height. If only one dimension is specified, the other will be calculated using the viewport aspect ratio.

Thanks for the suggestion, @anshuk

1 Like

@mishav - first, thanks for this awesome plugin.

Secondly, I can’t seem to figure out how to eliminate the white space under the zoom control… can you please give me any hints? Please see below, thanks again!

hey @collegefund.me

The zoom control is inside the croppie element, so adjustments you can make:

overall width / height aspect ratio, its a bit fiddly to find the sweet spot.
border size/colour of element
background size/colour of element
“boundary” size, for example height 80%

Have a look at the samples in the above posts, see if you can find settings that you prefer.

I like your design : )

Thanks @mishav!

Do you have any examples that show a custom zoom control? and/or is there an easy way to change the zoom control colors please?

Thanks again.

Good question! I have thought about both of these.

I found that using a Bubble slider doesn’t work well as a zoom control. I was thinking of adding a zoom control as an optional separate element; which has complications for multiple croppie elements, specifying which croppie element it belongs to.

Customising the current zoomer would be a change of styling, I’ll look at adding that in soon.

1 Like

That would be epic, thanks @mishav - maybe somehow it would also be possible to add some coordinate configuration for the slider bar as well. At that point, I can think of no other enhancements :slight_smile:

Thanks again for this amazing plugin.

1 Like

I’ve noticed that our users would like to have more ‘fine controls’ when using the zoomer. A lot of times their images jump from small to large while the zoomer has moved one notch. Adding some level of customization for zoomer sensitivity would be amazing.

1 Like

Just wanted to say that Croppie is brilliant and without it we would never have been able to get Sprrk.ly working as well as it does on image upload. I have also used it extensively in my next project as well.

@mishav was super responsive as I was stretching the possibilities of Croppie in the early days to allow for multi images to be uploaded. If anyone is interested, an example is up here …

https://buildingonbubble.com/block/mulitple-cropped-images-1498803294304x966981573587238900

3 Likes

Hey,

Croppie is great, but I’m having some issues on the mobile version. I’m not sure if croppie is really intended for mobile though so it is what it is.

When I rotate my phone, the progress is lost and the user has to load another image. Obviously it’s not the end of the world for the user but it’s something I noticed, what are your thoughts?

Thanks,
MB

1 Like

Thanks for the useful feedback, I’ll look into seeing if this is configurable.

Great that you got this working, and thank you for building a great demo : )

I think on a screen rotate, the element gets a “change” event from Bubble. If its inside of a repeating group, this is the only indication that it now belongs to a different line, so losing the progress is appropriate.

I’ll look into making this behaviour configurable too. So many options!

3 Likes

Great plugin - thanks for building it.

Users of my app are reporting issues on mobile. Specifically, once a photo is uploaded and they click ‘rorate photo’, the page crashes and reloads. I tested this and it happened 2/4 times.

Is this a known issue?

Can’t seem to recreate the issue.

Yep its intermittent so hard to pin down. Will report if I can figure out the exact combination of device, browser, file type etc that is causing this.

Another bug: When users upload photos, I noticed that some of them have some whitespace where it shouldn’t. Examples:

Original image: http://s3.amazonaws.com/appforest_uf/f1509588150268x992216960759833500/7DB2D97E-B679-440B-8B40-58D6A38B10E4.jpeg
Cropped Image: http://s3.amazonaws.com/appforest_uf/f1509588132421x693356972187757400/image.jpg

Original image: http://s3.amazonaws.com/appforest_uf/f1509555773798x270114259328693160/34AAA3AF-A0AF-4B37-8C4C-D2E0E7FA8A4C.jpeg
Cropped image: http://s3.amazonaws.com/appforest_uf/f1509555771472x584527194732800100/image.jpg

Original Image: http://s3.amazonaws.com/appforest_uf/f1509395460745x569764614105224640/20160528_103235.jpg
Cropped Image: http://s3.amazonaws.com/appforest_uf/f1509395457808x870344163151457900/image.jpg

To reproduce, you can download the original image and use croppie to turn it into a square image.

My croppie settings

This is happening across devices, browsers, image formats. So I’m unable to find any specific patterns.

@mishav @NigelG → any ideas how to get around this?