Taro生成二维码及保存失败问题记录

生成

使用weapp-qrcode库，调用方法：

<Canvas style='width: 200px; height: 200px;' canvasId='myQrcode' />

import { qrcode as drawQrcode } from '../../utils'
drawQrcode({ width: 200, height: 200, canvasId: 'myQrcode', _this: this.$scope, text: url });

这以上都没问题，注意要在<canvas>挂载之后调用方法。

长按保存为二维码

在onLongTap属性上挂载

<Canvas style='width: 200px; height: 200px;' canvasId='myQrcode' onLongTap={this.saveImage} />

saveImage方法：

async saveImage() {
        try {
            const res = await Taro.canvasToTempFilePath({
                canvasId: 'myQrcode',
                quality: 1
            })
            const saveRes = await Taro.saveImageToPhotosAlbum({
                filePath: res.tempFilePath
            })
            Taro.showToast({ title: '保存成功' })
        } catch (e) {
            console.log('error', e)
            Taro.showModal({ title: '错误', content: '图片保存失败' })
        }
    }

这里直接保存失败，报错信息：canvasToTempFilePath: fail canvas is empty??<canvas>挂载之后为毛还empty？
参考小程序官方文档发现有第二个参数this，修改为以下代码即可成功保存

....
await Taro.canvasToTempFilePath({
               canvasId: 'myQrcode',
               quality: 1
           }, this.$scope)
...