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

Question

我正在使用cropit jquery插件来管理我网站上的图像裁剪。我设置它的方式是cropit将给我一个基本的64字符串，我将传递给PHP，它将解码它并将其放在文件夹中。问题是，当我解码字符串时，它只会产生大约1/10的图像，其余的只是白色/透明。我的代码如下：

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);
}

当我将$('#image-cropper').cropit('previewSize', {width:500, height:500});的宽度/高度设置为250时，我在这里的代码正在工作。我不得不改变它，因为没有更大的宽度/高度，它将保存一个非常低分辨率的图像，它仍然是一个问题，但不是主要问题。任何帮助都会很棒。谢谢！

在浏览器中查看base64：

使用PHP解码时

base64：

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);
}

使用上面的函数使用base64编码值创建图像，这里需要将参数传递给函数decode('YOUR_IMAGE_ENCODED_STRING')

我的输出

谢谢＆amp;问候。

Answer 2

导出功能用作大小限制的数据URI方案（取决于浏览器）。

由于cropit导出功能允许调整图像格式和压缩因子，您可以尝试保存jpeg并调整质量以获得数据URI限制内的最佳结果：

// 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

});