微信小程序获取小程序码的问题

国家战略忽悠局
  • 388

需要生成分享图片,获取的小程序码是base64文本,小程序中的canvas的drawImage不支持base64格式的数据,在电脑的模拟器上可以,但是真机不行。
请问这个问题怎么解决比较好?
如果获取小程序码返回的是二进制流,可以保存成本地文件吗?
image控件支持base64,但是如何利用呢?
目前只能是后端返回一个小程序码的url,但这样做有点耗费资源。

回复
阅读 4.7k
5 个回答

小程序的canvas貌似不支持绘制网络图片和base64图片,只能先把图片下载到本地,然后再使用

我记得获取小程序码响应的是二进制流,image 是不能直接显示二进制流的,可以显示 base64。如果你只显示一个该小程序的小程序码,也不想后端返回一个 url,那可以后端将二进制流转为 base64 返回前端。如果分享的图片是动态的,且内容比较多,还是服务端生成返回比较好吧。

         <image  wx:if="{{imageCode}}" @tap="herfCode" class='right'  src='{{imageCode}}'/>

直接src = base64的那个值就行

微信小程序码接口返回的是二进制流,你可以借助前端js工具,将改二进制流转为base64图片,直接展示即可

可以看看这篇博客,亲测成功。

后端返回base64数据后,拼接上data:image/jpeg;base64,前缀,然后调用博客中写的方法:

引用:import base64src from '../../utils/base64src.js'

调用:

base64src('data:image/jpeg;base64,' + res.data).then(path => {
  // context.drawImage(path, ......)
}).catch(res => {
  // error
})

基本思想是先将base64数据保存到本地,然后使用本地的图片路径绘制在canvas上。

base64src.js:

const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src';

const base64src = function(base64data) {
  return new Promise((resolve, reject) => {
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
    if (!format) {
      reject(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() {
        resolve(filePath);
      },
      fail() {
        reject(new Error('ERROR_BASE64SRC_WRITE'));
      },
    });
  });
};

export default base64src;

微信小程序 base64 图片 canvas 画布 drawImage 实现

宣传栏