Croppie: Can you get the actual cropped PNG from Croppie instead of the base64 encoding?

[TheAustinG]

Hi,

I was wondering if there was anyway that Croppie is able to output the result as an actual image file rather than just an encoded base64 version of it.

Maybe it already does and I'm just not using it right. But I would like the user to be able to upload a photo, crop it with croppie, and then send the actual photo/png to my server for processing/storing.

Is this at all possible?

Thanks!

[thedustinsmith]

No, currently there's no way for croppie to give your server an image file. It's possible to download a file on the client side, but not send a file to the server.

Sending the base64 data is very similar to sending a file. It's all the image data you need. Every server side language has a method of converting base64 data to a file. What language are you using.

PHP: http://stackoverflow.com/questions/15153776/convert-base64-string-to-an-image-file
C#: http://stackoverflow.com/questions/18827081/c-sharp-base64-string-to-jpeg-image
Python: http://stackoverflow.com/questions/2323128/convert-string-in-base64-to-image-and-save-on-filesystem-in-python

I'm sure you can find any snippet you need to decode the base64 string into an image.

[Mevrael]

Hi, @TheAustinG

You can use BunnyFile.base64ToBlob() https://github.com/Mevrael/bunny/blob/master/src/file/file.js#L78
There is also BunnyImage.

For any questions please ask me on twitter.

You can send Blobs to server as a files with FormData API
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

[Mevrael]

@thedustinsmith I see you have many issues about the same problem how to save image and send it to server. Would you mind adding in readme or website approach I described above?

In PHP using Symfony/Laravel or just in $_FILES I'm getting the valid File instance as it was uploaded by a user. I'm sure it will also work for any other language/service/platform.

[thedustinsmith]

No offense, but it seems very inefficient to convert the base64 string to a blob, when the canvas element has a toBlob method attached to it. I'd rather use that than doing two expensive operations.

Closing this one in favor of #185