admin管理员组

文章数量:1535108

点击下载图片分两种：
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/img/baidu_jgylogo3.gif" download />

第一种（不同源）下载：

直接上代码

var x=new XMLHttpRequest();
    x.open("GET", "http://danml/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();

在点击事件里添加以上代码即可！亲测有效

有帮助的码客们点赞呦！

本文标签： 下载图片浏览器js

版权声明：本文标题：JS实现浏览器点击下载图片 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726895484a1089086.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。