vue项目base64字符串转图片的实现代码

实现base64字符串转图片的代码如下：

/**
 * base64字符串转图片
 * @param {String} dataUrl base64字符串
 * @return {Object} 图片 Blob 对象
 */
function dataURLtoBlob (dataUrl) {
  const arr = dataUrl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}

其中 dataUrl 为 base64 编码的字符串，返回结果为图片的 Blob 对象。

使用该函数将 base64 字符串转换为图片，可以按照以下步骤进行操作：

1. 在 Vue 组件中引入该函数：

import dataURLtoBlob from '@/common/utils'

1. 将 base64 字符串传入函数中，获取图片 Blob 对象：

// 示例1：将 base64 字符串转换为图片 Blob 对象
const blob = dataURLtoBlob('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAYAAACadoJwAAAACXBIWXMAABJ0AAAf+QGF5gTRAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAIABJREFUeAGs3Xm4rXWd/kVjRZ2Y8zZzJl4gTKyZKRMhbEKLpEaS6qC6qLdQ50t6ytQqBX5NAHpsf7DE+/Oeu3bu23SYxt7bsqV7Xu7D9e/RIAAAEI/wBxgLn9LHBf/3u7FoAAAAASUVORK5CYII=')

1. 使用 URL.createObjectURL() 将图片 Blob 对象转换为图片地址：

const imgUrl = URL.createObjectURL(blob)

1. 将图片地址展示在页面上：

<!-- 示例2：将图片展示在页面上 -->
<template>
  <div>
    <img :src="imgUrl" alt="图片" />
  </div>
</template>

<script>
// 在组件中引入该函数
import dataURLtoBlob from '@/common/utils'

export default {
  data () {
    imgUrl: ''
  },
  mounted () {
    const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAYAAACadoJwAAAACXBIWXMAABJ0AAAf+QGF5gTRAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAIABJREFUeAGs3Xm4rXWd/kVjRZ2Y8zZzJl4gTKyZKRMhbEKLpEaS6qC6qLdQ50t6ytQqBX5NAHpsf7DE+/Oeu3bu23SYxt7bsqV7Xu7D9e/RIAAAEI/wBxgLn9LHBf/3u7FoAAAAASUVORK5CYII='
    const blob = dataURLtoBlob(dataUrl)
    const imgUrl = URL.createObjectURL(blob)
    this.imgUrl = imgUrl
  }
}
</script>

这样操作后就可以将 base64 字符串转换为图片，并在页面上展示出来了。