Question

我正在开展一个项目，即以圆形方式裁剪上传的图片，然后将其保存以供预览。这里还有一个用于下载已保存图像的按钮，该按钮被裁剪。这是我的主要php页面：

＆＃13;

$data = $_POST['image'];

list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);

$data = base64_decode($data);
$imageName = time().'.png';
if (file_put_contents('upload/' . $imageName, $data)) {
    echo json_encode(['image' => 'upload/' . $imageName]); // upload is successful and we return image URL to Javascript
}else {
    echo json_encode(['image' => false]); // if upload fails
}

＆＃13;

和ajax的另一个是：

＆＃13;

FirebaseMessagingService

＆＃13;

它的功能很简单，运行良好。我努力制作一个简单的可下载按钮但从未找到合适的JQuery。现在我正在寻找JQuery下载按钮来下载裁剪图像。请指导我必须放置的代码部分和位置。

感谢您的帮助。：）

Answer 1

我已将您的下载图片按钮更改为<a>，并将其ID设为download并使用HTML5 download attribute强制下载文件

<div>
    <a name="Download Save Image" id="download" download>Download Save Image</a>
</div>

您的PHP

$data = $_POST['image'];

list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);

$data = base64_decode($data);
$imageName = time().'.png';

if (file_put_contents('upload/' . $imageName, $data)) {
    echo json_encode(['image' => 'upload/' . $imageName]); // upload is successful and we return image URL to Javascript
}else {
    echo json_encode(['image' => false]); // if upload fails
}

然后在AJAX中获取图片网址，并通过添加href和target属性将其设置为下载锚标记。

$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {

        $.ajax({
            url: "ajaxpro.php",
            type: "POST",
            data: {"image": resp},
            success: function (data) {
                console.log(data);
                var response = JSON.parse(data);
                if (response.image) {
                    html = '<img id="preview" src="' + response.image + '" />';
                    $("#upload-demo-i").html(html);
                    $('#download').attr({
                        target: '_blank',
                        href: response.image
                    })
                }else {
                    alert('Failed to upload image');
                }
            }
        });
    });
});

JQuery For Download Button

1 个答案: