vue中的base64图片转网络URL方式

 更新时间:2024年10月16日 11:02:25   作者:Juliet_xmj  
在Vue中,可以直接将Base64编码的图片赋值给img元素的src属性,此外,也可以通过JavaScript的URL.createObjectURL()方法将Base64转换为Blob URL,进而转换为File对象,并可进一步转换为PNG或其他格式的图片,这种转换技术在前端开发中非常实用

vue base64图片转网络URL

src支持base64图片,正常base64图片可以直接复制到图片src,也可以将其转为URL

// data
url: 'XXXXXXXX' // base64编码
imgUrl: '' // 图片路径

// methods
base64ImgtoFile (dataurl, filename = 'file') {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
    },

打印得到File文件,再转为png图片

const img = 'data:image/png;base64,' + img
this.file = this.base64ImgtoFile(img) // 得到File对象
this.imgUrl = window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file) // imgUrl图片网络路径

base64转url、url转base64

   // url转base64
            dataURLtoBlob(dataurl) {
                return new Promise((resolve, reject) => {
                let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while(n--){
                    u8arr[n] = bstr.charCodeAt(n);
                }
                resolve(new Blob([u8arr], {type:mime}));
                })
            },
 
const images = await Promise.all([
                    this.dataURLtoBlob(this.imageUrl),
                    this.dataURLtoBlob(this.imageUrl2),
                ])
// base64转url
            dataURLtoBlobURL(dataUrl) {
                return new Promise((resolve, reject) => {
                    let arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                    while(n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    let blob = new Blob([u8arr], {type:mime});
                    let url = URL.createObjectURL(blob);
                    resolve(url);
                });
            },
               let url1 = await this.dataURLtoBlobURL(this.imageUrl);
               let url2 = await this.dataURLtoBlobURL(this.imageUrl2);

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3学习笔记简单封装axios示例实现

    vue3学习笔记简单封装axios示例实现

    这篇文章主要为大家介绍了vue3学习笔记简单封装axios示例实现,
    2022-06-06
  • vue.js实现图片压缩封装方法

    vue.js实现图片压缩封装方法

    这篇文章主要介绍了vue.js实现图片压缩封装方法,包括全局main.js引入方法,通过引入imgupload方法结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 详解vue2路由vue-router配置(懒加载)

    详解vue2路由vue-router配置(懒加载)

    本篇文章主要介绍了详解vue2路由vue-router配置(懒加载),实例分析了vue-router懒加载的技巧,非常具有实用价值,需要的朋友可以参考下
    2017-04-04
  • 解决vue脚手架项目打包后路由视图不显示的问题

    解决vue脚手架项目打包后路由视图不显示的问题

    今天小编就为大家分享一篇解决vue脚手架项目打包后路由视图不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue2.0实现自适应分辨率

    Vue2.0实现自适应分辨率

    这篇文章主要为大家详细介绍了Vue2.0实现自适应分辨率,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue2(三)实现子菜单展开收缩,带动画效果实现方法

    Vue2(三)实现子菜单展开收缩,带动画效果实现方法

    这篇文章主要介绍了vue实现收缩展开效果的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue学习之组件用法实例详解

    Vue学习之组件用法实例详解

    这篇文章主要介绍了Vue学习之组件用法,结合实例形式分析了vue.js组件的使用流程、模板、父子组件、插槽slot等相关原理与操作技巧,需要的朋友可以参考下
    2020-01-01
  • Vue3中导入和使用图标库Font Awesome的实现步骤

    Vue3中导入和使用图标库Font Awesome的实现步骤

    Font Awesome 是互联网的图标库和工具包,被数百万设计师、开发人员和内容创建者使用,Font Awesome的图标非常丰富,基本涵盖你所需要的所有,本文给大家介绍了Vue3中导入和使用图标库Font Awesome的具体步骤,需要的朋友可以参考下
    2025-01-01
  • Vue3动态路由踩坑实战记录

    Vue3动态路由踩坑实战记录

    当在开发各种系统应用时,我们常常需要根据不同用户角色来展示不同的菜单页面,动态路由提供了灵活的路由规则,可以根据需要轻松添加、修改或者删除路由,这篇文章主要介绍了Vue3动态路由踩坑实战的相关资料,需要的朋友可以参考下
    2026-05-05
  • vue element如何添加遮罩层

    vue element如何添加遮罩层

    这篇文章主要介绍了vue element如何添加遮罩层问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论