实现图片下载的常用方法

581 字

3 分钟

实现图片下载的常用方法

2023-04-26

前端

JS

后端配合下载#

TIP
需要下载的图片是后端生成并返回的场景。
设置返回的响应数据类型 responseType: ‘blob’

1
export const exportPNG = async (token?: string, id?: string, height?: string) => {
2
  // ...
3
  const pngData = await getPNGAsync(params);
4
  if (pngData.status) {
5
    ElMessage.warning('下载失败，请尝试重新导出');
6
    return;
7
  } else {
8
    const blob = new Blob([pngData], { type: 'application/image' });
9
    const downloadElement = document.createElement('a');
10
    const href = window.URL.createObjectURL(blob); //创建下载的链接
11
    downloadElement.href = href;
12
    downloadElement.download = `${fileName}.png`; //下载后的文件名，根据需求定义
13
    document.body.appendChild(downloadElement);
14
    downloadElement.click(); //点击下载
15
    document.body.removeChild(downloadElement); //下载完成移除元素
16
    window.URL.revokeObjectURL(href); //释放掉blob对象
17
  }
18
};

纯前端下载#

TIP
需要下载的图片是，本地页面的图片或者一个图片的URL的场景

同源的图片#

TIP
同源的图片可以直接利用a标签进行下载，给a标签设置download(H5新增的属性)属性可以：指定下载后的文件名称，并告诉浏览器下载该URL，而不是访问其指向的内容

1
<img src="./axios.png" alt="" style="height: 200px;" >
2
<a href="./axios.png" download="axios.png" target="_blank">点击下载</a>

非同源的图片#

TIP
跨域的图片不能直接使用a标签下载，可通过以下几种方式：

1. 利用canvas#

TIP
因为Base64编码不受同源策略限制，所以可以利用canvas的toDataURLAPI得到图片的Base64编码，然后再利用a标签设置download属性下载

1
const downloadImage = (imgUrl) => {
2
    const image = new Image()
3
    const fileName = imgUrl && imgUrl.split('/').pop()  // 文件名
4
    //  解决跨域 Canvas 污染问题
5
    image.setAttribute('crossOrigin', 'anonymous');
6
    image.onload = function(e) {
7
        const canvas = document.createElement('canvas')
8
        canvas.width = image.width
9
        canvas.height = image.height
10
        const context = canvas.getContext('2d')
11
        context.drawImage(image,0,0,image.width,image.height)
12
        //  得到图片的Base64编码数据
13
        const url = canvas.toDataURL('image/png')
14
        const a = document.createElement('a')
15
        const event = new MouseEvent('click')
16
        a.download = fileName || 'img'
17
        a.href = url
18
        a.dispatchEvent(event)
19
    }
20
    image.src = imgUrl
21
}

WARNING
需要注意的是，图片加载时异步的，在转化成dataURL前必须先确保图片加载到，否则让canvas立即执行绘制可能失败，所以我们应该把绘制canvas和转换Base64编码的过程放在onload中

2. 创建XHR对象发起请求#

1
const downloadIamge2 = (imgUrl) => {
2
      event.returnValue = false;  //  阻止默认事件
3
      const x = new XMLHttpRequest();
4
      x.open("GET", imgUrl, true);
5
      x.responseType = 'blob';  //  设置响应类型
6
      const fileName = imgUrl && imgUrl.split('/').pop()  // 文件名
7
      x.onload = function (e) {
8
        const url = window.URL.createObjectURL(x.response)
9
        const a = document.createElement('a');
10
        a.href = url
11
        a.download = fileName || 'img'
12
        a.click()
13
      }
14
      x.send();
15
    }