原生JS跟JQuery实现图片下载功能

)

原生JS实现下载图片功能

<!-- 页面创建一个下载的事件 -->
<button onclick="downloadImage()">下载图片</button>

<!-- 一个是要引入jquery的一个是不用的 下面都有注解 -->
<!-- <script src="./query.js"></script> -->
    <script>
     //图片地址
      let url="https://img2.baidu.com/it/u=3355464299,584008140&fm=26&fmt=auto&gp=0.jpg"  
        //图片名称
        let name="1.jpg" 
        //下载图片事件
       function downloadImage() {
            var _OBJECT_URL;  //
            // 
            var request = new XMLHttpRequest();  //通过创建请求来实现图片下载
            request.addEventListener('readystatechange', function (e) { //添加事件
                if (request.readyState == 4) {
                // 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​
                    _OBJECT_URL = URL.createObjectURL(request.response);   
                    // console.log(_OBJECT_URL);
                    // jQuery 写法
                    // var $a = $("<a></a>").attr("href", _OBJECT_URL).attr("download", name);
                    // $a[0].click();

                    // js 原生写法
                    var a = document.createElement('a')  //创建一个a标签
                    a.setAttribute("href", _OBJECT_URL) //给a标签添加href属性
                    a.setAttribute("download", name);  //同上添加 download 属性+图片名字
                    a.click();  // 给a标签添加事件然后下载
                    
                }
            });
            request.responseType = 'blob';
            request.open('get', url);
            request.send();
        }
//如果以上有不对的地方欢迎大佬纠正 
    </script>