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 字符串转换为图片,并在页面上展示出来了。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue项目base64字符串转图片的实现代码 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 在vue项目实现一个ctrl+f的搜索功能

    下面是实现“在Vue项目实现一个Ctrl+F的搜索功能”的攻略。 一、需求分析 在Vue项目中实现Ctrl+F搜索功能的主要目的是让用户快速找到需要查看的内容,提高用户体验。在实现过程中需要考虑以下几个因素: 功能实现方式:Ctrl+F搜索功能的实现方式有多种,例如使用原生JavaScript实现、使用Vue指令或组件实现等,我们需要选择合适自己项目的方式。…

    Vue 2023年5月28日
    00
  • VUE的tab页面切换的四种方法

    VUE 是一款流行的 JavaScript 前端框架,用于构建交互式用户界面。在 VUE 中,tab 页面切换是常见的功能,以下是 VUE 中实现 tab 切换的四种方法的完整攻略。 1. 标准的 VUE 动态组件方法 我们可以使用标准的 VUE 动态组件方法,在模板中设置一个变量,然后根据变量的值确定要显示的组件。这种方法需要我们在 VUE 组件中定义所有…

    Vue 2023年5月27日
    00
  • Vue实用功能之实现拖拽元素、列表拖拽排序

    下面我就为您介绍Vue实用功能之实现拖拽元素、列表拖拽排序的完整攻略。 首先,在Vue中实现拖拽元素和列表拖拽排序可以使用vuedraggable这一库。vuedraggable是一个基于Sortable.js的Vue组件,使我们可以轻易地创建可拖拽且可排序的列表。 首先,我们需要在Vue中引入vuedraggable依赖: import draggable…

    Vue 2023年5月28日
    00
  • Vue 用Vant实现时间选择器的示例代码

    请看以下详细讲解: Vue 用Vant实现时间选择器的示例代码 1. 安装 Vant 在项目中引入 Vant UI 库,可以通过npm进行安装: npm install vant -S 也可以从CDN方式引入,在HTML文件中添加以下代码: <!– 引入 Vant 样式文件 –> <link rel="stylesheet&q…

    Vue 2023年5月29日
    00
  • 详解如何使用webpack打包Vue工程

    下面我将为您详细讲解如何使用Webpack打包Vue工程: 环境准备 在使用Webpack打包Vue工程前,我们需要先搭建一些必要的环境: 安装Node.js和npm:Webpack依赖于Node.js和npm,需要先安装Node.js,并将npm更新至最新版本; 全局安装Webpack和Webpack-cli:输入命令npm install -g webp…

    Vue 2023年5月28日
    00
  • Vue3.2 新增指令 v-memo 用法详解(提高性能利器)

    我将为您详细讲解“Vue3.2 新增指令 v-memo 用法详解(提高性能利器)”的完整攻略。 简介 Vue 3.2 新增了 v-memo 指令,它专门用于对 Vue 组件进行记忆化优化。记忆化优化可以提高应用程序的运行效率,减少重复渲染和计算,从而大大提高应用程序的性能。 记忆化优化是一种重新运行的策略,该策略中,在组件生成后,不在计算过程中多次工作。所以…

    Vue 2023年5月29日
    00
  • Vue Axios异步与数据类型转换问题浅析

    下面我将为您详细讲解 “Vue Axios异步与数据类型转换问题浅析” 的完整攻略。 一、背景介绍 Axios 是一个基于 Promise 的 HTTP 库,可以在浏览器和 Node.js 中使用,用于与后台接口进行数据交互。Vue 是一个流行的前端框架,实现了数据的双向绑定和组件化开发,使得前端开发更加高效和灵活。 但在使用 Vue 和 Axios 进行开…

    Vue 2023年5月27日
    00
  • Vue3+Vite+TS实现二次封装element-plus业务组件sfasga

    下面是详细讲解 “Vue3 + Vite + TS 实现二次封装 element-plus 业务组件”的完整攻略。 一、前言 我们这里使用的框架是 Vue3,构建工具是 Vite,使用 TypeScript 对代码进行静态类型检查。我们将使用 element-plus 作为 UI 组件,同时对其进行二次封装。这样可以使我们的业务组件更加灵活、易用、容易扩展。…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部