使用canvas绘制,uqrcode标签中value为二维码的内容
<view class="qrcode">
<uqrcode ref="uqrcode" v-show="false" canvas-id="qrcode" value="-" :options="{ margin: 10 }"
@complete="getCodeUrl"></uqrcode>
<canvas style="width: 300rpx; height: 300rpx;" canvas-id="myCanvas" id="canvas">
</canvas>
</view>
// 当二维码生成时,获取二维码的临时路径
drawImage(code) {
console.log(code);
let ctx = uni.createCanvasContext('myCanvas')
ctx.setFillStyle('#f2f2f2')
ctx.fillRect(0, 0, 150, 150)
// ctx.setFontSize(20)
ctx.setFillStyle('#666')
ctx.setTextAlign('center')
// ctx.fillText('这里是画布', 300 / 2, 30, 300)
// 绘制二维码图片
ctx.drawImage(code, 0, 0, 150, 150)
ctx.draw()
},
// 当二维码生成时,获取二维码的临时路径
getCodeUrl(res) {
if (res.success) {
this.$refs.uqrcode.toTempFilePath({
success: res => {
this.getPath(res.tempFilePath)
}
});
}
},
// base64文件转为暂存文件
getPath(code) {
const fs = uni.getFileSystemManager();
var times = new Date().getTime();
var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
fs.writeFile({
filePath: codeimg,
data: code.slice(22),
encoding: 'base64',
success: () => {
this.drawImage(codeimg)
}
});
},