js/vue.js将base64字符串转图片

在Vue.js中，将Base64字符串转换为图片并上传通常涉及以下步骤：

1. 将Base64字符串转换为Blob对象。
2. 使用FormData对象将Blob对象包装起来。
3. 将转换后的图片流上传到服务器，或者下载到本地。

关于如何将图片转为base64编码可以看我另外一篇文章

https://blog.csdn.net/qq_45947853/article/details/135406007

这里主要介绍转为图片后下载到本地的方法：

处理方法主要是 base64ToBlob 的函数，它接收两个参数：一个 base64 编码的字符串和一个 MIME 类型的字符串。

1. 使用 window.atob 方法将 base64 编码的字符串解码为二进制字符串。
2. 函数创建了一个空的数组 byteArrays，用于存储转换后的二进制数据。
3. 函数使用一个循环，每次处理二进制字符串的一部分（长度为 sliceSize）。在每次循环中，函数首先使用 slice 方法获取二进制字符串的一部分，然后创建一个新的数组 byteNumbers，用于存储这部分字符串的每个字符的字符代码（使用 charCodeAt 方法获取）。
4. 函数使用 Uint8Array 构造函数将 byteNumbers 数组转换为一个 8 位无符号整数数组，然后将这个数组添加到 byteArrays 数组中。
5. 函数使用 Blob 构造函数将 byteArrays 数组转换为一个 Blob 对象，并设置其 MIME 类型为传入的 mime 参数。

<template>
    <el-button type="primary" size="default" @click="downloadImage">下载</el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 这里是你的Base64编码的字符串
let imgUrl = ref('data:image/png;base64,iVBORw0KGg....')


const base64ToBlob = (base64: string, mime: string) => {
  mime = mime || '';
  let sliceSize = 1024;
  let byteChars = window.atob(base64);
  let byteArrays = [];

  for (let offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
    let slice = byteChars.slice(offset, offset + sliceSize);

    let byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    let byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: mime });
}

const downloadImage = () => {
  let base64ImageContent = imgUrl.value.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
  let blob = base64ToBlob(base64ImageContent, 'image/png');
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = 'image.png';
  link.click();
}


</script>