微信小程序 canvas 生成二维码图片并转成 base64 展示

有个需求是在小程序页面展示二维码。

于是使用 canvas 实现了一下，发现有个bug，真机上看的时候，滑动页面，canvas 会抖动，在安卓上更是乱跑，没法用。

使用服务端生成二维码会有点影响服务器性能，并且消耗带宽。

不如考虑将 canvas 转成 base64 图片后展示。

下面是实现步骤：

1. 使用weapp-qrcode生成二维码图片

首先，你需要安装weapp-qrcode库来生成二维码。可以通过npm安装：

npm i weapp-qrcode

写页面:

<!-- WXML -->
<button bindtap="showQRCode">生成二维码</button>
<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode" id="myQrcode"></canvas>

JS:

// JS
import drawQrcode from 'weapp-qrcode';

Page({
  showQRCode() {
    drawQrcode({
      width: 200,
      height: 200,
      canvasId: 'myQrcode',
      text: 'http://crowall.com/xxx/xxxx' // 这里填写你想要生成二维码的内容
    });
  },
});

2. 将画布上的二维码转换成图片地址

使用微信小程序提供的 canvasToTempFilePath API 将画布临时转换为图片地址：

// JS
Page({
  // ...
  showQRCode() {
    // ...生成二维码的代码
    const that = this;
    wx.canvasToTempFilePath({
      canvasId: 'myQrcode',
      success: function(res) {
        that.setData({
          qrcodeUrl: res.tempFilePath // 将临时路径保存到data中
        });
      }
    });
  },
});

3. 将图片地址转换为base64

使用 wx.getFileSystemManager().readFile 方法读取图片文件，并将其转换为base64格式：

// JS
Page({
  // ...
  convertToBase64() {
    const that = this;
    wx.getFileSystemManager().readFile({
      filePath: this.data.qrcodeUrl, // 二维码图片的临时路径
      encoding: 'base64',
      success: function(res) {
        that.setData({
          base64Img: 'data:image/png;base64,' + res.data // 将base64数据保存到data中
        });
      }
    });
  }
});

4. 在WXML中展示base64图片

<!-- WXML -->
<image src="{{base64Img}}" mode="aspectFit"></image>

这样，你就可以在微信小程序中生成二维码图片，并将其转换为base64格式进行展示了。