uniapp将uQRCode生成的二维码绘制到canvas中（仅限微信小程序）

原创

已于 2023-04-21 11:13:01 修改 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #javascript

于 2023-04-21 10:48:31 首次发布

该文详细介绍了如何在uniapp项目中使用uQRCode插件生成二维码，并将二维码图像绘制到canvas上。首先通过插件生成二维码，然后转换其base64格式为本地文件路径，最后在canvas上绘制二维码图片。

需求：
通过uQRCode生成二维码，并绘制到canvas中

1. 在项目中导入插件

uniapp——uQRCode插件市场
 uQRCode 中文文档
这里直接使用HBuilderX导入插件

2. 通过uQRCode绘制二维码

<uqrcode
	ref="uqrcode"
	canvas-id="qrcode"
	value="https://uqrcode.cn/doc"
	:options="{ margin: 10 }">
</uqrcode>

3. 获取生成二维码的临时路径

<!-- 这里可以把二维码隐藏——v-show="false" -->
<uqrcode
	v-show="false"
	ref="uqrcode"
	canvas-id="qrcode"
	value="https://uqrcode.cn/doc"
	:options="{ margin: 10 }"
	@complete="getCodeUrl">
</uqrcode>

uQRCode返回的临时路径是base64格式，不能直接绘制到canvas

// 当二维码生成时，获取二维码的临时路径
getCodeUrl (res) {
   
   
	if (res.success) {
   
   
		this.$refs.uqrcode.toTempFilePath({
   
   
		  success: res => {
   
   
		    console.log(res);
		  }
		});