如何将cropit中的图片导出到php进行上传？

我已经在互联网上搜索了一段时间，但找不到任何可以告诉我如何将结果从$('#image-cropper').cropit('export')转换为 PHP 可以上传到服务器的图像。我正在使用 Cropit 插件，我需要的只是一个可以传递到我的 php 上传脚本中的图像。我的代码如下：

HTML:

<div id="image-cropper">
    <input type="file" class="cropit-image-input" />
    <div class="cropit-image-preview"></div>
    <input type="range" class="cropit-image-zoom-input" />
    <button class="export">Export</button>
</div>

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

这里的代码对于插件来说可以正常工作，但我无法将结果变成类似的结果data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD...到我可以在 php 脚本中使用的图像。任何帮助都会很棒。谢谢！

我让它工作的方法是修改 Cropit 的质量设置并创建一个读取 base64 字符串并将其转换为图像的 PHP 函数。

下面的代码适用于cropit。我设置了一个超时，因为如果你不这样做，它会在cropit创建base64之前将表单发送到php。 Base64 字符串仅存储在 php 可以基于该文本字段进行通信的文本字段中$_POST

//Initiate Cropper
$('.image-editor').cropit();

//Assign Export Function
$('.export').click(function() {
    var imageData = $('.image-editor').cropit('export', {
        type: 'image/jpeg',
        quality: 0.33,
        originalSize: true,
    });

    //Set value of hidden input to base64
    $("#hidden_base64").val(imageData);

    //Pause form submission until input is populated
    window.setTimeout(function() {
        document.upload_form.submit();
        alert(imageData);
    }, 1000);
});

下面的代码是针对php的。它的工作原理是解码 Base64，然后将其移动到指定的目录。

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

    file_put_contents('directory/filename.jpg', $code);
}