JS怎么实现浏览器点击下载图片功能

本篇内容介绍了“JS怎么实现浏览器点击下载图片功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

点击下载图片分两种：
1、一种是同源地址图片（也就是本地本项目中的图片）；
2、另一种是不同源的图片；

下面我们就具体说一下这两种图片下载的方式：
 

第一种（同源）下载：

利用a标签下载， a标签有一个download的属性，添加了该属性，a标签将直接下载文件，并根据download属性的值设置下载文件的文件名，不为download属性设置值则文件将以默认文件名下载:

如：

<!-- 文件名为默认名称 -->
<a href="https://www.maopiaopiao.com">

注意，它仅支持同源链接下载，非同源链接还是会直接打开图片:
如非同源

<a href="https://www.maopiaopiao.com">

第一种（不同源）下载：

直接上代码

var x=new XMLHttpRequest();
    x.open("GET", "https://cache.yisu.com/upload/information/20230420/112/138464.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();

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

应用案例

说明：笔者在实际开发中针对上述代码进行了测试，案例记录如下：

1.html部分，应用a链接添加时间响应，实现点击下载功能：

<a href="https://www.maopiaopiao.com">

2.点击下载的js事件响应部分，将上文提到的下载代码封装成一个函数：

window.saveas = function(img,filename){
    event.returnValue = false;
    let x=new XMLHttpRequest();
    x.open("GET", img, true);
    x.responseType = 'blob';
    x.onload=function(e){
        let url = window.URL.createObjectURL(x.response);
        let a = document.createElement('a');
        a.href = url
        a.download = filename
        a.click()
    }
    x.send();

  }

注意：对比上文中的代码，这里的函数封装做了一定的改进，要注意两点：

①.首先 

event.returnValue = false;

②.

a.download = ''