参考并转载: https://blog.csdn.net/weixin_33694620/article/details/88170573
a标签有一个download的属性,添加了该属性,a标签将直接下载文件,并根据download属性的值设置下载文件的文件名,不为download属性设置值则文件将以默认文件名下载:但是这个办法有一个弊端,它仅支持同源链接下载,非同源链接还是会直接打开图片:
方法一:(谷歌浏览器没有下载,是新打开窗口显示图片,有问题)
let aLink = document.createElement("a");
aLink.style.display = "none";
aLink.setAttribute('target', '_blank');
aLink.href = '图片地址';
aLink.download = data.resourceName + '.' + this.fileFormat(data.format);
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
改进版:(图片Blob)
function downloadImg(url, name) {
// 将链接地址字符内容转变成blob地址
fetch(url).then(function(res) {
res.blob();
}).then(funtction(blob) {
// 创建隐藏的可下载链接
const a = document.createElement('a');
a.style.display = 'none';
a.href = URL.createObjectURL(blob);
a.download = name;
document.body.appendChild(a);
a.click();
// 移除元素
document.body.removeChild(a);
});
}
方法二:(图片Blob)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="download()">点击下载</button>
</body>
<script>
function download() {
var image = new Image();
image.crossOrigin = "anonymous";
image.src = "http://is3.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
var fileName = image.src.split(/(\\|\/)/g).pop();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
canvas.getContext('2d').drawImage(this, 0, 0);
var blob;
// ... get as Data URI
if (image.src.indexOf(".jpg") > -1) {
blob = canvas.toDataURL("image/jpeg");
} else if (image.src.indexOf(".png") > -1) {
blob = canvas.toDataURL("image/png");
} else if (image.src.indexOf(".gif") > -1) {
blob = canvas.toDataURL("image/gif");
} else {
blob = canvas.toDataURL("image/png");
}
$("body").html("<b>点击下载图片.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
};
}
</script>
</html>
方法三:(base64)
function downloadImgByBase64(url) {
var img = new Image()
img.onload = function() {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
// 将img中的内容画到画布上
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
// 将画布内容转换为base64
var base64 = canvas.toDataURL()
// 创建a链接
var a = document.createElement('a')
a.href = base64
a.download = ''
// 触发a链接点击事件,浏览器开始下载文件
a.click()
}
img.src = url
// 必须设置,否则canvas中的内容无法转换为base64
img.setAttribute('crossOrigin', 'Anonymous')
}
downloadImgByBase64('http://static.shuxuejia.com/img/201708020.gif');
上述方法效果都不太理想。因为这两种方法仅支持生成jpeg和png格式图片。如果是gif图,仅能显示第一帧的内容。
后来在download.js官网中看到了如下的示例:
var x=new XMLHttpRequest();
x.open("GET", "http://static.shuxuejia.com/img/201708020.gif", true);
x.responseType = 'blob';
x.onload=function(e){
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a');
a.href = url
a.download = ''
a.click()
}
x.send();
通过这种方法下载图片,gif图也能够显示正常了。
注意,上述方法能够兼容大部分浏览器,但是不兼容IE浏览器(不支持download属性)。要兼容IE浏览器需要用其他办法。