微信小程序 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中
});
}
});
},
});
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格式进行展示了。