croppie-保存裁剪的图像

Question

我询问了多个相关问题，并在解决方案中尝试了这些问题，但不幸的是，它们都失败了。

所以我所拥有的是：一个带有图像的在线文件夹，一个用于选择Croppie的小JavaScript和一个浏览器中的裁剪示例。然后，我无法正常使用编码，因为无法查看生成的文件。我已经尝试了一些使用base64的选项，但是有点卡住了。

src_img_crop_save

<?php
    function is_base64_encoded($data)
    {
        if (preg_match('%^[a-zA-Z0-9/+]*={0,2}$%', $data)) {
           return TRUE;
        } else {
           return FALSE;
        }
    };

    if (isset($_POST['PassId'])) {

        $userid         = $_POST['PassId'];
        $PassContent    = $_POST['PassImg']; 
        $content        = $PassContent; // try if base64 image is already base64_encoded
        $filename       = $_POST['FileName'];
    //  $filename       = (substr($filename,0,-4)) . '.png'; 

        if(is_base64_encoded($PassContent)) {
            $content = $PassContent;
            echo 'content seemed base64 encoded<br>';
        } else {
            $content = base64_encode($PassContent);
            echo 'content was not yet base64 encoded<br>';
        }

        $physicalDir    = 'dansers/setcardimg/'.$userid.'/';
        $physicalFile   = $physicalDir. $filename;

        if(!file_exists($physicalDir)) {
            mkdir($physicalDir, 0777, true);
        }
        if(file_exists($physicalFile)) {
            $fp = fopen($physicalFile, 'w');
        } else {
            $fp = fopen($physicalFile, 'x');
        }
        fwrite($fp, $content);
        fclose($fp);
        chmod($physicalFile, 0777);  //changed to add the zero
        echo $PassContent . '<br><hr><br>';
        echo 'file: <a href="'.$physicalFile.'" target="_BLANK">'.$physicalFile.'</a>';
    } else {
        echo 'nothing done: '.$physicalFile;
    }
    ?>

JavaScript

function img_crop_save() {
    var PassImg     = $('.sweet-alert p img').attr('src');
    var PassId      = $("#userid").val();
    var FileName    = $("#filename").val();     

    var fd = new FormData();
    fd.append("PassImg", PassImg);
    // These extra params aren't necessary but show that you can include other data.
    fd.append("FileName", FileName);
    fd.append("PassId", PassId);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '../src_img_crop_save.php', true);

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            //$(loading).html('<img src="img/loading.gif" alt="uploading image" style="margin-left: 10px;" />');
        }
    };

    xhr.onload = function() {
        if (this.status == 200) {
            var responds = xhr.responseText;
            $('#src_img_crop_save_results').html(responds);
        } else {
            $('#src_img_crop_save_results').html('sorry this did not go well');
        };
    };

    xhr.send(fd);
}; 

，然后加载的JavaScript文件将绑定图像并设置配置：

function demoBasic() {
        var $w = $('.basic-width'),
            $h = $('.basic-height'),
            basic = $('#demo-basic').croppie({
            viewport: {
                width: 320,
                height: 480
            },
            boundary: {
                width: 400,
                height: 560
            }
        });
        basic.croppie('bind', {
            url: '/assets/croppie-master/demo/cat.jpg'
        });

        $('.basic-result').on('click', function() {
            var w = parseInt($w.val(), 10),
                h = parseInt($h.val(), 10),s
                size = 'viewport';
            if (w || h) {
                size = { width: w, height: h };
            }
            basic.croppie('result', {
                type: 'base64', 
                size: size,
                resultSize: {
                    width: 320,
                    height: 480
                }
            }).then(function (resp) {
                popupResult({
                    src: resp
                });
            }).then(function(resp) {
                img_crop_save();
            });
        });
    }