Base64 image from cropit is getting clipped when decoded with PHP

Question

I'm using the cropit jquery plugin to manage image cropping on my website. The way I have it setup is that cropit will give me a base 64 string that I'll pass to PHP which will decode it and place it in the folder. The issue is that when I decode the string it will only make about 1/10 of the image, the rest will just be white / transparent. My code is as follows:

jQuery:

    var username = "<?php echo $userData['username']; ?>";
    $('#image-cropper').cropit({
        imageState:{
            src:'users/'+username+'/profile_picture.jpg'
        },
    });   

    $('#image-cropper').cropit('previewSize', {width:500, height:500});


    $('.export').click(function() {
        var imageData = $('#image-cropper').cropit('export');
        //$("#code").val(imageData);
        window.open(imageData);
    }); 

PHP:

function decode ($base64) {
    list($type, $base64) = explode(';', $base64);
    list(, $base64)      = explode(',', $base64);
    $code = base64_decode($base64);

    echo $userData['username'];

    file_put_contents('users/' . $userData['username'] . '/profile_picture.png', $base64);
}

The code I have here was working when I had the width/height of $('#image-cropper').cropit('previewSize', {width:500, height:500}); set to 250. I had to change it because without a larger width/height it would save a very low resolution image which is still an issue but not as major. Any help would be great. Thanks!

base64 viewed in browser:

base64 when decoded with PHP:

Answer 1

function decode ($base64) {
    $explodeBase64  = explode(";base64,", $base64);
    $code = base64_decode($explodeBase64[0]);
    file_put_contents('users/' . $userData['username'] . '/profile_picture.'.basename(@$explodeBase64[0]), $code);
}

Use the above function to create an image using base64 encoded values, here you need to pass a parameter to function decode('YOUR_IMAGE_ENCODED_STRING')

My output:

Answer 2

The data URI scheme that the export function is using as size limitations (depending on the browser).

As the cropit export function allows to tweak the image format and compression factor, you could try to save in jpeg and adjust the quality for best results inside the data URI limits:

// Returns the cropped image in Data URI format.
// The second argument `options` takes the following keys:
// - [type='image/png'] exported image type.
// - [quality=.75] exported image quality, only works when type is
//     'image/jpeg' or 'image/webp'.
// - [originalSize=false] when set to true, export cropped part in
//     original size, overriding exportZoom.
// - [fillBg='#fff'] if `type` is 'image/jpeg', this color will be
//     filled as the background of the exported image.

$imageCropper.cropit('export', {
  type: 'image/jpeg',
  quality: .9,
  originalSize: true

});