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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

直接src = base64的那个值就行

Answer 4

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

Answer 5

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

后端返回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 实现