vue3通过base64实现图片下载功能

一. 使用场景

当我们处理图片下载功能的时候，如果本地的图片，那么是可以通过canvas获得图片的base64的，方法如下。但是如果图片的url存在跨域问题的话，下面的方法将行不通，这时候我们可以另辟蹊径，将后台的同学，将图片以base64的形式进行返回。

1.canvas获得图片的base64

const getBase64 = (url) => {
  //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
  var Img = new Image(),
    dataURL='';
  Img.src=url;
  Img.onload = () => { //要先确保图片完整获取到，这是个异步事件
    var canvas = document.createElement("canvas"), //创建canvas元素
      width=Img.width, //确保canvas的尺寸和图片一样
      height=Img.height;
    canvas.width=width;
    canvas.height=height;
    canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
    dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
  };
}

2. 处理base64，进行下载

<script setup lang="ts">
const handleDownloadQrIMg = () => {
  // 这里是获取到的图片base64编码
  const imgUrl = prefixBase64 + formData.base64
  // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
  if (window.navigator.msSaveOrOpenBlob) {
    let bstr = atob(imgUrl.split(',')[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    let blob = new Blob([u8arr])
    window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
  } else {
    // 这里就按照chrome等新版浏览器来处理
    let a = document.createElement('a')
    a.href = imgUrl
    a.setAttribute('download', 'chart-download')
    a.click()
  }
}

2-1. 我们首先直接处理base64（基于vue）

<template>
<a
  :href="prefixBase64 + qrBase64" rel="external nofollow" rel="external nofollow"
  download="qrcode.png"
  class="qrcode"
 >
  <img src="static/img/load.png">
 </a>
</template>
<script setup lang="ts">
const prefixBase64 = 'data:image/png;base64,'
const qrBase64 = 'data:image/png;base64,'
</script>

2-2. 兼容方法

<template>
<a
  @click.stop.prevent="handleDownloadQrIMg"
  class="qrcode"
 >
  <img src="static/img/load.png">
 </a>
</template>
<script setup lang="ts">
const prefixBase64 = 'data:image/png;base64,'
const qrBase64 = 'data:image/png;base64,'
const handleDownloadQrIMg = () => {
  // 这里是获取到的图片base64编码
  const imgUrl = prefixBase64 + qrBase64
  // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
  if (window.navigator.msSaveOrOpenBlob) {
    let bstr = atob(imgUrl.split(',')[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    let blob = new Blob([u8arr])
    window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
  } else {
    // 这里就按照chrome等新版浏览器来处理
    let a = document.createElement('a')
    a.href = imgUrl
    a.setAttribute('download', 'chart-download')
    a.click()
  }
}
</script>