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

于是使用 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中
        });
      }
    });
  },
});

PS: 理论上直接用 res.tempFilePath 应该也能展示图片,这样就不需要下面的嗯第3步了,不过我没尝试,今天回看文章突然想起来可以这么做,所以补充一句。

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格式进行展示了。

标签: base64, canvas, 微信小程序, 二维码

添加新评论