如何将 img 的 src 转换为图像并保存到文件夹？

Question

我当前正在使用一个页面，该页面允许用户从模态屏幕上裁剪图像，并使用canvas将裁剪的图像传递给img元素。img的src属性具有以data:image/png:base64 ...开头的随机字符。我要做的是，当我最终击中保存/在我的注册表单中提交时，此图像将转换为新的图像文件并保存到指定的文件夹中。

这是我用来裁剪图像并传递给img元素的代码：

$(document).ready(function() {
    $uploadCrop = $('#cb').croppie({
        enableExif: true,
        viewport: {
            width: 250,
            height: 250,
            /*type: 'circle'*/
        },
        boundary: {
            width: 300,
            height: 300
        }
    });
    $('#file1').on('change', function() { 
        var reader = new FileReader();
        reader.onload = function(e) {
            $uploadCrop.croppie('bind', {
                url: e.target.result
            }).then(function(){
                console.log('jQuery bind complete');
            });
        }
        reader.readAsDataURL(this.files[0]);
    });
    //THIS OPENS A MODAL SCREEN THAT ALLOWS THE CROPPING OF SELECTED IMAGE
    $('#cropBtn').on('click', function(e) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function (canvas) {
            // This is the code that passes the result to another image file which will then be used to produce a new image file to save in to the directory for a particular user account profile photo.
            $('.profilePic').attr('src', canvas);
        });
    });
});

Answer 1

例如：

$data = 'iVBORw0KGgoAAAANSUhEUgAAABwAAAASCAMAAAB/2U7WAAAABl'
       . 'BMVEUAAAD///+l2Z/dAAAASUlEQVR4XqWQUQoAIAxC2/0vXZDr'
       . 'EX4IJTRkb7lobNUStXsB0jIXIAMSsQnWlsV+wULF4Avk9fLq2r'
       . '8a5HSE35Q3eO2XP1A1wQkZSgETvDtKdQAAAABJRU5ErkJggg==';
$data = base64_decode($data);
$im = imagecreatefromstring($data);
if ($im !== false) {
    header('Content-Type: image/png');
    imagepng($im);
    imagedestroy($im);
}
else {
    echo 'An error occurred.';
}