一般都是通过创建A标签，使用download属性进行下载，但是，如果遇到跨域的图片，就会直接打开图片，无法下载，这时，通过下面的方式即可：
方法一：
function downLoadImage(imgsrc,name){
var shijc = new Date().getTime();
imgsrc = imgsrc + "?t=" + shijc;
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png",0.7); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name?name+'.png':"photo.png"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
}
方法二：
function downloadnewimg(src, name) {
src = src + "?t=" + new Date().getTime();
fetch(src).then((response) => {
response.blob().then((myBlob) => {
const href = URL.createObjectURL(myBlob);
let a = document.createElement("a");
a.href = href;
a.download = name;
a.click();
});
});
}
-------
仅仅前端这样还不够，还需要图片服务器进行以下设置：
在宝塔的设置》配置文件里，或者伪静态设置里，加入以下代码：
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
评论
发表
