微信小程序uni-app图片和base64相互转换

目录:

  • uni-app图片和base64相互转换
    • 从手机上选择图片转base64:
    • 网络图片转base64或者16进制:
    • base64图片转本地图片:
    • 源码获取方法:
    • 会员学习群:【一对一答疑】

uni-app图片和base64相互转换


从手机上选择图片转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或者16进制:

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', //编码格式:base64 | hex(16进制)
          success: res => { //成功的回调
            let userImageBase64 = 'data:image/jpg;base64,' + res.data;
            console.log(userImageBase64); // 打印base64格式图片
          }
      })
    }
  })
},

base64图片转本地图片:

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'));
    },
  });
},

以上代码仅供参考,具体实现细节和样式可以根据需求自行调整。


源码获取方法:

需要完整源码的朋友,希望你能点赞+收藏+评论,然后私信我即可~

会员学习群:【一对一答疑】

如果教程中有不懂的地方,可添加学习会员小助手咨询(微信:mifankeji77)文章来源地址https://uudwc.com/A/z3gaR

阅读剩余 46%

原文地址:https://blog.csdn.net/weixin_42317757/article/details/130967030

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

h
上一篇 2023年08月03日 13:47
关于Postman Pre-request Script 请求前处理(AES加密以及HMAC-SHA256)
下一篇 2023年08月03日 13:53