点击下载图片分两种:
1、一种是同源地址图片(也就是本地本项目中的图片);
2、另一种是不同源的图片;(不同域名下,比如阿里云 七牛云上的图片)
下面我们就具体说一下这两种图片下载的方式:
第一种(同源)下载:
利用a标签下载, a标签有一个download的属性,添加了该属性,a标签将直接下载文件,并根据download属性的值设置下载文件的文件名,不为download属性设置值则文件将以默认文件名下载:
如:
<!-- 文件名为默认名称 -->
<a href="./baidu_jgylogo3.gif" download />
<!-- 文件名为baidu.gif -->
<a href="./baidu_jgylogo3.gif" download="baidu" />
<!-- 文件名为baidu.png -->
<a href="./baidu_jgylogo3.gif" download="baidu.png" />
注意,它仅支持同源链接下载,非同源链接还是会直接打开图片:
如非同源 <a href="http://www.baidu.com/img/baidu_jgylogo3.gif" download />
第一种(不同源)下载:
直接上代码
var x=new XMLHttpRequest();
x.open("GET", "http://danml.com/wave2.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();
在点击事件里添加以上代码即可!亲测有效
有帮助的码客们点赞呦!