一般都是通过创建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";
评论
发表
