前端 图片下载

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

一、如果后台直接给的图片下载地址 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.widthcanvas.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 转换为 base64let a = document.createElement('a')a.download = 'test.png'a.href = imgBase64a.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 blobUrllet img = new Image()img.setAttribute('crossOrigin', 'Anonymous')img.onload = () => {
    let canvas = document.createElement('canvas')canvas.width = img.widthcanvas.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 转换为 base64let a = document.createElement('a')a.download = 'test.png'a.href = blobUrla.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 = blobUrla.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')

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