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);

}

});

}},