生成
使用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)
...