使用PHP解码时，来自cropit的Base64图像将被剪裁

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

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

});