微信小程序 本地图片和base64图片相互转换

这篇具有很好参考价值的文章主要介绍了微信小程序 本地图片和base64图片相互转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

wx.chooseImage === 从本地相册选择图片或使用相机拍照
wx.getFileSystemManager() === 获取全局唯一的文件管理器
wx.getFileSystemManager().readFile === 读取本地文件内容
wx.base64ToArrayBuffer() === 将 Base64 字符串转成 ArrayBuffer 对象
wx.downloadFile === 下载文件资源到本地

从手机上选择图片转base64

getToBase64(){
    wx.chooseImage({
      count:'1',   // 最多可以选择的图片张数
      sizeType: ['original', 'compressed'], // ['原图','压缩图']
      sourceType: ['album', 'camera'],  // ['从相册选图','使用相机']
      success: res => {
      wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0], //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            console.log('data:image/png;base64,' + res.data)
          }
        })
      }
    })
  },

网络图片转base64图片

getToBase64Two(){
    var httpsimg = 'https://baidu.com/a.jpg'   // 网络图片地址
    wx.downloadFile({     // 需要先下载 
      url: httpsimg,
      success(res) {
        console.log(res,'res')
        wx.getFileSystemManager().readFile({
            filePath: res.tempFilePath, //选择图片返回的相对路径
            encoding: 'base64', //编码格式
            success: res => { //成功的回调
              let userImageBase64 = 'data:image/jpg;base64,' + res.data;
              console.log(userImageBase64); // 打印base64格式图片
            }
        })
      }
    })
  },

base64图片转本地图片文章来源地址https://www.toymoban.com/news/detail-772579.html

getToLocal(){
    var base64data = "";   // base64
    const fsm = wx.getFileSystemManager();
    const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
    if (!format) {
      return (new Error('ERROR_BASE64SRC_PARSE'));
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
    const buffer = wx.base64ToArrayBuffer(bodyData);
    fsm.writeFile({
      filePath,
      data: buffer,
      encoding: 'binary',
      success(r) {
        console.log(r,'r')
        console.log(filePath,'filePath')
      },
      fail() {
        return (new Error('ERROR_BASE64SRC_WRITE'));
      },
    });
  },

到了这里,关于微信小程序 本地图片和base64图片相互转换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Base64字符串与图片的相互转换

    本篇博客记载的是一个我们在开发过程中很常用的一个小功能,就是我们在处理图片的时候做数据存放到数据库的功能, 我们存放的不再是本地路径而是一个Base64的字符串! 然后我们在取值的时候又将Base64转换为一个图片文件的做法 简单的两个步骤: Base64Util: ImageUtils: 使用

    2024年02月15日
    浏览(33)
  • 图片与Base64编码相互转换、优势分析和技术实现

    在Web开发中,图片与Base64编码的相互转换是一个非常实用的技能。图片 Base64编码是将图片文件转换为字符串格式,以便于在网络上传输和存储。本文将详细介绍图片与Base64编码的转换方法,以及图片Base64编码的优势。 图片Base64相互转换 | 一个覆盖广泛主题工具的高效在线平

    2024年01月19日
    浏览(41)
  • uniapp图片转base64及JS各文件类型相互转换

    App H5 微信小程序 快手小程序 京东小程序 √ √ √ √ √ 功能限制主要在arrayBufferToBase64 微信小程序 字节跳动小程序 QQ小程序 √ √ √ 功能限制主要在getFileSystemManager H5 √ 功能限制主要在FileReader实例上 在 JavaScript 中的经常用到的二进制的格式有三种: ArrayBuffer:用来表示通

    2024年02月08日
    浏览(36)
  • 微信小程序常见图片格式转base64图片

    1、在utils文件下新建一个auth.js文件(随便取一个名字,你开心就行),在里面添加以下代码 如果是网络图片需要先使用wx.downloadFile({...})下载之后才可进行转换,本地的则直接转换即可你可根据具体需求修改代码,不要受此处代码影响。 2、在你需要使用的地方引入

    2024年02月06日
    浏览(32)
  • 微信小程序中无法显示base64图片

    在微信小程序中展示图片信息时,后端返回的数据中的图片地址位base64 在小程序进行图片渲染后,发现有一部分的图片不能成功显示,直接为空白,但是在调试器里查看图片地址已经注入进 src 里面了,尝试将图片地址复制出来用浏览器打开,发现可以正常显示 图片在浏览器

    2024年02月12日
    浏览(33)
  • uniapp 微信小程序base64流转图片

    因为这次后端返回的图片并不是一个http地址,百度找了很久,在此记录 1,新建一个js文件 2.在vue文件中引入 import { base64ToPath} from \\\'./base64src.js\\\' let result = 后端返回的base64流.replace(/[rn]/g, \\\"\\\"); let pdfBase64 = `data:application/pdf;base64,${result}`;

    2024年02月16日
    浏览(34)
  • uniapp-微信小程序-图片转base64

    当前在做得小程序设计拍照识别,而服务器方需要前端提供图片的base64编码作为参数进行解析识别,一开始想着走原生JS的base64方法——借助canvas,当然我也试了,就在自己觉得没问题的时候,调试时终端报错了:ReferenceError: Image is not defined. 我着实懵了,也就是说Image对象实

    2024年02月13日
    浏览(27)
  • 【uniapp】微信小程序 普通图片路径和base64格式图片 保存图片到相册

    第一种:普通图片路径 第二种:base64格式的图片 以上便是两种保存图片的方式。 

    2024年04月23日
    浏览(23)
  • 微信小程序canvas画布绘制base64图片并保存图片到相册中

    WXML部分: 样式可以根据自己需求自行调整 canvas绘制成图片部分: 这就将图片绘制出来了。 首先获取用户相册权限。 保存功能:

    2024年02月13日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包