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日

相关文章

  • 解决iView中时间控件选择的时间总是少一天的问题

    这里提供一种解决iView中时间控件选择的时间总是少一天的问题的方法。 问题现象 在使用iView的DatePicker组件(包括RangePicker)时,选择某个日期后,获取到的日期总是比实际选择的日期少一天。 解决方案 这个问题的原因是iView组件在计算日期时,没有考虑到时区的影响。具体来说,是由于iView通过Date对象的getFullYear、…

    Vue 2023年5月29日
    00
  • vue实现钉钉的考勤日历

    下面是详细讲解“vue实现钉钉的考勤日历”的完整攻略。 1. 需求分析 首先,我们需要明确实现钉钉考勤日历的需求,包括数据展示、日期筛选、数据搜索等功能,然后根据需求选择合适的UI组件和数据处理方式。 2. 数据处理 接下来,我们需要对考勤数据进行处理,包括读取本地文件、筛选数据、统计数据等,并将处理后的数据渲染到页面上。 3. UI组件选择 根据需求,我们…

    Vue 2023年5月28日
    00
  • Vue函数式组件的应用实例详解

    概述 本文主要介绍Vue函数式组件的应用实例,涵盖以下内容: 什么是Vue函数式组件 Vue函数式组件的优势 Vue函数式组件的应用场景 Vue函数式组件的实现方法 Vue函数式组件的应用实例 什么是Vue函数式组件 Vue函数式组件是一种特殊的组件形式,它与常规的组件形式不同,主要体现在以下两个方面: 函数式组件是无状态的(stateless),它没有响应…

    Vue 2023年5月28日
    00
  • vue 实现删除对象的元素 delete

    要在Vue中实现删除对象的元素delete,可以根据以下步骤进行: 1. 在Vue实例中定义一个对象 定义一个Vue实例中的对象,其中包含了需要进行删除的属性。例如: var vm = new Vue({ data: { items: [ { id: 1, name: ‘item1’ }, { id: 2, name: ‘item2’ }, { id: 3,…

    Vue 2023年5月28日
    00
  • vue中复用vuex.store对象的定义

    在Vue项目中,我们通常使用Vuex库来管理应用中的状态。这使得我们可以更方便地在组件之间共享数据和状态。有时候,我们需要在不同的组件中复用Vuex的store对象,以实现跨组件访问和修改共享状态的目的。这个过程可以通过以下步骤完成: 1.定义Vuex的store对象 在Vue应用中,我们通常会在一个单独的js文件中定义Vuex的store对象。这个对象包含…

    Vue 2023年5月28日
    00
  • vue遍历对象中的数组取值示例

    下面我给您讲解一下“vue遍历对象中的数组取值”这个话题。 在vue.js中,我们经常需要遍历对象中的数组并取出其中的数据。这种需求很常见,而vue提供了非常方便的解决方案。 遍历数组取值的常见方法 例1:利用v-for指令遍历数组并输出数组内元素 下面是一个例子,假设我们的数据对象是这样的: var data = { list: [ {name: ‘小明’…

    Vue 2023年5月28日
    00
  • 五分钟教你使用vue-cli3创建项目(新手入门)

    下面我将为您详细讲解“五分钟教你使用vue-cli3创建项目(新手入门)”的完整攻略。 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,可用于快速搭建项目。Vue CLI3 是 Vue CLI 的升级版本,提供了更友好、更强大、更快捷的项目脚手架。 环境准备 在使用 Vue CLI3 创建项目之前,您需要先确保安装了 Node.js …

    Vue 2023年5月29日
    00
  • JSP上传图片产生 java.io.IOException: Stream closed异常解决方法

    问题描述: 在使用 JSP 实现文件上传功能时,有时会出现 java.io.IOException: Stream closed 异常,这是因为在使用表单上传文件时,文件流对象在上传完之后必须要关闭,若流被关闭后仍然继续写入文件流会发生流关闭异常。 解决方案: 将文件流转换为字节数组并缓存 在上传大型文件时,为了避免 OutOfMemoryError 异常,…

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