uniapp生成带有产品信息和二维码的海报

需求：后端返回产品图片和个人信息，前端根据产品链接生成二维码，然后将产品图片、用户信息、二维码生成海报，并点击下载。

这里使用了qrcodejs2、html2canvas、file-saver插件，使用前分别进行安装。

点击海报列表在弹层中显示对应的海报产品，并且生成组合的图片供用户下载。

       <u-popup 
			v-model="show" 
			mode="center" 
			width="650" 
			height="80%"
			@close="closePop"
			:closeable="closeable" 
			border-radius="15">
			<div class="currentPost" id="currentPost" ref="qrCodeUrl">
				<view class="malone" v-if="isPicture">
					<image :src="picture" class="m-img" >
					<view class="save" @tap="savePoster">
						<image src="../../../static/images/index/download.png" >
						<text>保存图片</text>
					</view>
				</view>
				<view class="jordan" v-else>
					<view class="current"><image :src="posterImg" ></image></view>
					<view class="content">
						<view class="con-user">
							<view class="snow"> <image :src="picSrc" ></image></view>
							<view class="con-info">
								<view class="txt job">
									{{info.nickname}}
									<text>顾问</text>
								</view>
								<view class="txt">{{info.phone}}</view>
							</view>
						</view>
						<view class="con-ewm" id="qrcode" ref="qrcode">
							<div id="qrCode" ref="qrCodeDiv"></div>
						</view>
					</view>
				</view>
			</div>
		</u-popup>

　

            //获取海报列表
			async getPosterList() {
				let p = await getListByParentCodes({ parentCodes: [ "poster" ] });
				this.posterList = p.data.data.poster;
			},
			//点击查看海报
			handlePoster(item) {
				this.show = true;
				// this.posterImg = item.image1Url;
				this.posterImg = this.localhostimg;
				this.posterUrl = this.href + '#' + item.url;
				setStorageSync('poster_image1Url', this.posterUrl)
				console.log(this.posterUrl, '海报', item.configName)
				this.couponQrCode(this.posterUrl);
				setTimeout(() => {
					this.generatePic();
					uni.showLoading({ title: '海报生成中' });
				}, 300)
			},
			//生成二维码
			couponQrCode(posterUrl) {
				const el = this.$refs.qrCodeDiv;
				if (!el) {
					this.timer = setTimeout(() => {
						this.couponQrCode();
					},300)
				} 
				this.$nextTick(() => {
					new QRCode(this.$refs.qrCodeDiv, {
						width: 70,
						height: 70,
						text: posterUrl,
						//容错率，L/M/H 容错率越高,越复杂
						correctLevel: QRCode.CorrectLevel.L, 
						render: "canvas",
					});
				})
			},
			//生成拼合后的海报图片
			generatePic() {
				let that = this;
				html2canvas(this.$refs.qrCodeUrl,{
					// 设置截图的起始位置，否则图片会不显示
					scrollY: 0,  
					scrollX: 0,
				}).then(canvas => {
					uni.hideLoading();
					let img = canvas.toDataURL("image/png").split(",")[1];
					that.completePic = "data:image/png;base64," + img;
					that.isPicture = true;
					that.picture = that.completePic;
					// console.log('生成后的海报',this.picture)
				 })
			},
			//保存图片
			savePoster() {
				if (!this.completePic) {
					 uni.$showMsg('图片生成中，请稍后')
					 return
				}
				saveAs(this.completePic, '分享海报')
			},
			clearTimer() {
				if (this.timer) {
				  clearTimeout(this.timer)
				}
			},
			closePop() {
				console.log('关闭')
				this.isPicture = false;
				this.clearTimer();
			}