uniapp微信小程序生成带个人二维码的海报

1：Sansnn-uQRCode 导入插件（生成二维码）（插件市场）（源码和结果如下）

2：弹窗展示海报内容

3：createCanvasImage绘制canvas海报

4：canvasToTempFilePath （canvas转成图片文件）

<template>
	<view class="popup" v-if="isPaperCode" @click="handlePaperCodeClose">
		<view class="popup-content" @click.stop="()=>{}">
			<view class="code">
				<!-- // https://ext.dcloud.net.cn/plugin?id=1287 -->
				<u-qrcode ref="qrCode" canvas-id="qrCode" :value="text" :size="size" :options="codeOptions"
					@complete="complete"></u-qrcode>
			</view>
			<view class="username">
				{{realName}}
			</view>
		</view>
		<button class="popup-btn" @click.stop="saveShareImg">保存到相册</button>
		<canvas canvas-id="myCanvas" style="width: 703rpx;height:989rpx; position: fixed;top: -10000rpx"></canvas>
	</view>
</template>


<script>
	import AES from "./../utils/AES.js"
	import debounce from "./../utils/debounce.js"
	export default {
		props: {
			// 二维码弹窗
			isPaperCode: {
				type: Boolean,
				default: false
			},
			// 名字，默认取缓存
			userName: {
				type: String,
				default: ''
			},
			// 身份证,默认取缓存
			idCardNumber: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				//绘制海报内容
				codeUrl: '', //二维码临时链接
				realName: '', //姓名
				downLoadTime: '', //下载时间
				canvasToTempFilePath: '', //海报临时地址
				text: '', //二维码海报绘制内容
				size: 200, //二维码尺寸
				// 二维码参数可选项，
				codeOptions: {
					errorCorrectLevel: 'L', //纠错等级L/M/Q/H分别对应1/0/3/2
				},
				codeFinshed: false, //二维码绘制完成
			}
		},
		watch: {
			isPaperCode(newVal) {
				if (newVal) {
					this.codeFinshed = false;
					this.size = uni.upx2px(405)
					const userinfo = JSON.parse(uni.getStorageSync('userinfo') || {});
					const obj = {
						cardNo: this.idCardNumber || userinfo.idCardNumber,
						time: new Date().getTime() + 1800000
					};
					this.text = AES.encrypt(JSON.stringify(obj));
					let myDate = new Date()
					let year = myDate.getFullYear();
					let mounths = ((myDate.getMonth() + 1) < 10 ? '0' : '') + (myDate.getMonth() + 1);
					let days = (myDate.getDate() < 10 ? '0' : '') + myDate.getDate()
					this.downLoadTime = `${year}.${mounths}.${days} 下载`
					this.realName = this.userName || userinfo.name
				}
			}
		},
		methods: {
			// 二维码绘制完成回调
			complete(e) {
				if (e.success) {
					this.$refs['qrCode'].toTempFilePath({
						success: res => {
							this.codeUrl = res.tempFilePath;
							this.codeFinshed = true;
						}
					})
				}
			},
			// 点击阴影关闭弹窗	
			handlePaperCodeClose() {
				if (!this.codeFinshed) return;
				this.$emit("update:isPaperCode", false);
			},
			// 保存到系统相册
			saveImageToPhotosAlbum() {
				uni.saveImageToPhotosAlbum({
					filePath: this.canvasToTempFilePath, // 必须是本地路径
					success: () => {
						uni.showToast({
							icon: 'success',
							title: '保存成功',
							duration: 2000
						});
					},
					fail: () => { // 保存失败有可能是用户点击了取消按钮，也有可能是用户未授权保存相册功能这时候需要用户手动开启权限
						uni.getSetting({
							success(res) {
								if (res.authSetting['scope.writePhotosAlbum'] ==
									false) {
									uni.showModal({
										title: '提示',
										content: `图片保存失败，请前往设置页面允许保存相册`,
										success: function(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {
														console.log('用户打开设置页面')
													}
												})
											}
										}
									})

								}
							}
						})
					}
				})
			},
			// 保存按钮
			saveShareImg: debounce(function() {
				if (this.canvasToTempFilePath) {
					this.saveImageToPhotosAlbum()
				} else {
					this.createCanvasImage()
				}

			}, 500),
			// 绘制海报方法
			createCanvasImage() {
				uni.showLoading({
					title: '生成中...'
				});
				const ctx = uni.createCanvasContext('myCanvas', this);
				ctx.drawImage('../static/convas-bg.png', 0, 0, uni.upx2px(703), uni.upx2px(989));
				ctx.drawImage(this.codeUrl, uni.upx2px(150), uni.upx2px(241), uni.upx2px(405), uni.upx2px(
					405));
				ctx.font = 'normal bold 18px Source Han Sans CN';
				ctx.setFillStyle('#666666'); // 文字颜色
				ctx.fillText(this.realName, uni.upx2px(300), uni.upx2px(690))

				ctx.font = 'normal bold 10px Source Han Sans CN';
				ctx.setFillStyle('#CCCCCC'); // 文字颜色
				ctx.fillText(this.downLoadTime, uni.upx2px(268), uni.upx2px(942)); // 绘制孩子百分比
				ctx.draw(true, () => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							width: 703,
							height: 989,
							destWidth: 703,
							destHeight: 989,
							success: res => {
								this.canvasToTempFilePath = res.tempFilePath
								this.saveImageToPhotosAlbum()
							},
							complete: () => {
								uni.hideLoading();
							}
						}, this)
					}, 200)
				})
			}
		}
	}
</script>

<style>
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 750rpx;
		height: 100%;
		background: rgba(11, 32, 80, 0.7);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 9;
	}

	.popup-content {
		margin-top: 40rpx;
		width: 703rpx;
		height: 989rpx;
		background-size: 100% 100%;
		border-radius: 6rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.code {
		margin-top: 240rpx;
		width: 405rpx;
		height: 405rpx;
	}

	.username {
		font-size: 36rpx;
		font-weight: bold;
		color: #666666;
		line-height: 76rpx;
	}

	.footer {
		margin-top: 180rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #CCCCCC;
		line-height: 76rpx;
	}

	.popup-btn {
		margin-top: 35rpx;
		width: 700rpx;
		height: 91rpx;
		background: #2E90F5;
		border-radius: 6rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>