uni-app 生成邀请二维码海报

uni-app 生成邀请二维码海报

效果图：

主要思路：

通过uniapp插件tki-qrcode生成二维码，canvas将背景图和二维码整合在一起

在二维码生成时，会出现很长时间的白屏时间，具体原因还在查找，暂定的解决方案，是在第一次生成后，将cavas转成base64位的img，保存到缓存中，下一次进来，如果缓存有数据，那么则直接拿缓存中的数据

主要代码：

qrR(path) {
	uni.showLoading({
		title: '正在合成二维码...'
	});
	let that = this;
	let src = uni.getStorageSync('qrCodeSrc');
	if (src) {
		that.show = false;
		that.testSrc = src;
	} else {
		this.qr_path = path;
		let system_info = uni.getSystemInfoSync();
		let ctx = uni.createCanvasContext('firstCanvas');
		uni.getImageInfo({
			src: that.cover,
			success(res) {
				ctx.drawImage(res.path, 0, 0, system_info.windowWidth, uni.upx2px(1334));
				ctx.fillStyle = '#FFFFFF';
				// 外部白框位置
				ctx.fillRect(uni.upx2px(283), uni.upx2px(892), uni.upx2px(200), uni.upx2px(210));
				// 二维码放置位置
				ctx.drawImage(path, uni.upx2px(303), uni.upx2px(918), uni.upx2px(160), uni.upx2px(160));
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						success: function(res) {
						that.testSrc = res.tempFilePath;
						uni.setStorageSync('qrCodeSrc', res.tempFilePath);
							that.show = false;
							uni.hideLoading();
						},
						fail(e) {
							uni.showToast({
								title: '生成海报失败',
								icon: 'none'
							});
						}
				},
				);
				});
			},
			fail(error) {
			console.log(error);
			}
		});
	}},