Php JQuery下载按钮

我正在做一个项目，这是裁剪上传的图像在圆圈，然后保存预览它。这里还有一个按钮，用于下载裁剪后保存的图像。 这是我的php主页：

PHP-jquery ajax裁剪图像，然后使用croppie插件上传
图像裁剪区域
选择图像：




上传图像
下载并保存图像
$uploadCrop=$（“#上传演示”）.CROPIE({
enableExif:true，
视口：{
宽度：200，
身高：200，
类型：“圆圈”
},
边界：{
宽度：300，
身高：300
}
});
$（'#upload'）。在（'change'，函数（）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$UPLOADCROPE.CROPIE（'bind'）{
url:e.target.result
}).然后（函数（）{
log（'jQuery bind complete'）；
});
}
reader.readAsDataURL（this.files[0]）；
});
$（'.upload result'）。在（'click'，函数（ev）上{
$uploadCrop.CROPIE（'result'{
键入：“画布”，
大小：“视口”
}).然后（功能（resp）{
$.ajax({
url:“ajaxpro.php”，
类型：“POST”，
数据：{“图像”：resp}，
成功：功能（数据）{
控制台日志（数据）；
var response=JSON.parse（数据）；
if（response.image）{
html=''；
$（“#upload-demo-i”）.html（html）；
$（“#下载”）.attr({
目标：“\u blank”，
href:response.image
})
}否则{
警报（“未能上载图像”）；
}
}
});
});
});

我已将您的下载图像按钮更改为

以强制下载文件

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

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

$('.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');
                }
            }
        });
    });
});

$（'.upload result'）。在（'click'，函数（ev）上{
$uploadCrop.CROPIE（'result'{
键入：“画布”，
大小：“视口”
}).然后（功能（resp）{
$.ajax({
url:“ajaxpro.php”，
类型：“POST”，
数据：{“图像”：resp}，
成功：功能（数据）{
控制台日志（数据）；
var response=JSON.parse（数据）；
if（response.image）{
html=''；
$（“#upload-demo-i”）.html（html）；
$（“#下载”）.attr({
目标：“\u blank”，
href:response.image
})
}否则{
警报（“未能上载图像”）；
}
}
});
});
});
你说的下载是指使用ajax？是的，没错。。。我有一个ajax页面也可以显示裁剪后的结果。您是否尝试添加带有下载属性的链接？嗯，我试图使用它为我的div区也，但当我插入我的裁剪图像显示阻塞。。。你能告诉我如何在这一部分使用它吗。。。@AngelFragnance你上传图片的PHP如何？我尝试了你的代码，你可以检查我更新我的上面，但它不工作。。。当我点击上传图片按钮时，它并没有显示被裁剪的图片。另外，当我点击“下载保存图像”按钮时，它也不做任何事情。。。请再次检查我的更新代码，并让我知道我是否正确地放置了您的代码。没有错误…但按钮也不起作用。请右键单击下载并检查元素，检查
href
是否为空。它是否为空，因为您要保存/裁剪图像的代码不起作用。。。。首先，我们必须看看，当我们点击上传按钮，它必须显示裁剪图像。。。由于我以前的功能正在工作…代码正在为我工作，您使用的是哪个浏览器？
$('.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');
                }
            }
        });
    });
});