HTML+JS下载图片到本地

网上搜了很多资料。终于找到了一个兼容性好的。贴上地址。https://www.cnblogs.com/zhangkaiqiang/p/8183926.html

我简单介绍一下。

函数是这样的。

  两个参数，第一个是ID，CLASS名或者其他的，也就是CSS中的选择器，任何一个都可以。第二个是想重命名的名字。

function downloadIamge(selector, name) {
    // 通过选择器获取img元素，
    var img = document.querySelector(selector)
    // 将图片的src属性作为URL地址
    var url = img.src
    var a = document.createElement('a')
    var event = new MouseEvent('click')
    
    a.download = name || '下载图片名称'
    a.href = url
    
    a.dispatchEvent(event)
}

接着HTML调用：

<img src="1.jpg" class="img1"></img>
<input type="button" value="download_image" οnclick="downloadIamge('.img1','1.jpg')">