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

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:

我正在使用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);
}

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!

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

base64 viewed in browser:

在浏览器中查看base64:

base64 when decoded with PHP:

使用PHP解码时的base64:

2 个解决方案

#1

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

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

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:

由于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

});

#2

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')

使用上面的函数使用base64编码值创建一个图像,在这里你需要传递一个参数到函数解码('YOUR_IMAGE_ENCODED_STRING')

My Output

Thanks & Regards.

感谢和问候。

#1