下载图片到本地

html代码

 <input type="file" name="" id="">
 <button>下载图片</button>

 js代码

var ipt = document.querySelector('input')
var btn = document.querySelector('button')

var blobFlow
btn.addEventListener('click', function() {
    var a = document.createElement('a') // 创建一个a标签
    a.setAttribute('download', '1') // 属性值可以自定义保存图片的名称
    a.href = URL.createObjectURL(blobFlow)
    a.click()
  })

// 获取图片base64
ipt.onchange = function(e) {
    // 第一步：先读取文件
    const base = new FileReader()
    // 第二步：将需要转化的图片放进去
    base.readAsDataURL(e.target.files[0])
    // 第三步：获取结果， 因为文件加载需要时间，因此是个异步的过程，
    需要使用onload去获取读取的结果，读取转化后的结果放在了result属性里了
    base.onload = () => {
         var baseURL = base.result
             blobFlow = base64ToBlob(baseURL)
     }
}

// 将图片base64 转化为二进制流
function base64ToBlob(url) {
    let arr = url.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}

效果预览

 思想总结

1.将上传的图片转为base64；

2.把base64转为二进制流；

3.将二进制流通过URL.createObjectURL方法转为可被a标签打开的路径即可