下载图片

1.可以通过<a>链接来实现图片下载

<a href="test.jpg" download="图片名字">

     <img src="test.jpg" alt="">

</a>

弊端：仅支持同源链接下载，非同源链接还是会直接打开图片不下载。仅支持生成jpeg和png格式图片。如果是gif图，仅能显示第一帧的内容。

 

2.通过XMLHttpRequest()请求图片链接，将图片转成Base64或者Blob，然后获取返回的Blob。

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();

通过这种方法下载图片都能成功，gif图能够显示正常。

上述方法能够兼容大部分浏览器，但是不兼容IE浏览器(不支持download属性)。

 

3.通过JS来触发<a>连接来实现图片下载

<img id="testImg" src="test.jpg" alt="">

<button class="downloadBtn" type="button" οnclick="downloadImg()">下载图片</button>

 

function downloadImg(){

        var img = document.getElementById('testImg'); // 获取要下载的图片

        var url = img.src;                            // 获取图片地址

        var a = document.createElement('a');          // 创建一个a节点插入的document

        var event = new MouseEvent('click')           // 模拟鼠标click点击事件

        a.download = '图片名字'                  // 设置a节点的download属性值

        a.href = url;                                 // 将图片的src赋值给a节点的href

        a.dispatchEvent(event)                        // 触发鼠标点击事件

     }