前端 图片下载

图片下载是项目开发过程中经常提到的需求点，本文对以往用过，见过的图片下载方法进行一个汇总，如果后面有遇到，会继续进行补充

一、如果后台直接给的图片下载地址 URL。如后台给的图片下载地址为：http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.png

方式1： 直接使用 HTML的 a 元素进行图片的下载
<a href="http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.png" download="test.png"></a>

方式2：在页面无 a 元素的情况下，创建 a 元素，再进行下载
let a = document.createElement('a')
a.download = 'test.png'
a.href = 'http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.png' 
a.click()

// 注意：向上面的这种通过直接 a 标签的形式下载， 有些浏览器会直接网页进行打开预览图片。如果图片不同源，会有跨域问题

二、将图片 url 转为 图片 base64 ，然后再进行下载（注意：太大的图片不建议转 base64 ，防止转换后长度超过浏览器限制及转换时间过长）

// 1、将图片 url 转换为 base64
imgUrltoBase64(imgUrl){
    
    
    let imgBase64 = ''
    let img = new Image()
    img.setAttribute('crossOrigin', 'Anonymous')
    img.onload = () => {
    
    
        let canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height  = img.height 
        let context = canvas.getContext('2d')
        context.drawImage(img, 0, 0, width, height)
        imgBase64 = canvas.toDataURL('image/png')
        return imgBase64
    }   
}

// 2、下载图片
downbloadImg(imgUrl) {
    
    
    let imgBase64 = this.imgUrltoBase64(imgUrl) // 将图片 url 转换为 base64
    let a = document.createElement('a')
    a.download = 'test.png'
    a.href = imgBase64
    a.click()
}

// 3、调用 下载图片 方法
this.downbloadImg('http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.png')

三、将图片 url 转为 图片 blob ，然后 blob 转为 Blob对象的 URL，最后进行下载

// 1、将图片 url 转换为 blob
imgUrltoBlob(imgUrl){
    
    
    let blobUrl
    let img = new Image()
    img.setAttribute('crossOrigin', 'Anonymous')
    img.onload = () => {
    
    
        let canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height  = img.height 
        let context = canvas.getContext('2d')
        context.drawImage(img, 0, 0, width, height)
        canvas.toBlob = (blob) => {
    
    
            blobUrl = URL.createObjectURL(blob)
            return blobUrl
        }
    }   
}


// 2、下载图片
downbloadImg(imgUrl) {
    
    
    let blobUrl = imgUrltoBlob(imgUrl) // 将图片 url 转换为 base64
    let a = document.createElement('a')
    a.download = 'test.png'
    a.href = blobUrl
    a.click()
}

// 3、调用 下载图片 方法
this.downbloadImg('http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.png')

四、扩展

上文中的 ‘二’ 和 ‘三’ 都是通过 图片下载过程 都是通过 url -> canvas -> blob 或者 base64 方式进行转换后下载，
但对于 .gif 的动图，利用上面的方式就只能转换第一帧的内容，因为 canvas 就画了第一帧。
对于这种下载 .gif ，可以使用 xhrHttpRequest 的方式进行转换下载。

// .gif 图片下载
downloadImg(imgUrl){
    
    
  let xhr = new XMLHttpRequest()
  xhr.open('get', imgUrl, true)
  xhr.responseType = 'blob'
  xhr.onload = function(){
    
    
    let blobUrl = URL.createObjectURL(xhr.response)
    let a = document.createElement('a')
    let clickEvent = new MouseEvent('click')
    a.href = blobUrl
    a.download = 'test.gif'
    a.dispatchEvent(clickEvent)
    URL.revokeObjectURL(blobUrl)
  }
  xhr.send()
}

this.downloadImg('http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.png')

就写到这里，后面有遇到其他的再补充，祝大家开心！！！