uniapp-shikongwang/pages/center/invite.vue

<template>
	<view>
		<view class="flex justify-center lf-m-t-20">
			<!-- <image src="../../static/images/bill.png" mode="widthFix" style="height: 1220rpx;width: 686rpx;"></image> -->
			<image v-if="imagePath" :src="imagePath" mode="widthFix"></image>
		</view>

		<view class="canvas-box">
			<canvas style="width: 375px;height: 600px;position:fixed;top:9999px" canvas-id="mycanvas" />
		</view>

		<view class="btn-bottom" style="bottom: 40rpx;">
			<view class="padding-lr-lg">
				<button class="cu-btn block bg-orange lg" style="border-radius: 42rpx;" @tap="saveBill()">
					<text class="lf-font-32 text-white">保存</text>
				</button>
			</view>

			<!-- <view class="flex justify-center align-center lf-m-t-30">
				<view class="lf-color-gray lf-font-28">https：//hbdsufiewhuifusikj.com</view>
				<view class="lf-font-24 text-orange lf-m-l-30" @click="copy('https：//hbdsufiewhuifusikj.com')">复制</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				base64Img: '',
				checkArea: 'Cannot find module',
				maskHidden: false,
				info: {
					avatar: '',
					nickname: '',
					id: '',
					tel: '',
					tags: []
				},
				showLogin: true,
				imagePath: '',

				userToken: '',
				wxCode: '',
				onceCode: '',
				backgroundImg: ''
			}
		},
		onLoad() {
			wx.showToast({
				title: '生成海报中...',
				icon: 'loading',
				duration: 100000
			});
			this.getWxCode()
			this.getBackground()
		},
		methods: {
			getBackground() {
				let _this = this
				_this.$http(_this.API.API_BILLBACKGROUND, {
					type: 'telent_share'
				}).then(res => {
					let img = res.data.img_url
					if (img) {
						wx.getImageInfo({
							src: img,
							success: function(sres) {
								_this.backgroundImg = sres.path
								console.log('临时路径',_this.backgroundImg)
							}
						})
					}
				})
			},
			getWxCode() {
				let userInfo = uni.getStorageSync('userinfo') || {};
				this.$http(this.API.API_WXBILL, {
					scene: 'route=home&id=2&pt=2'+'&share_id='+userInfo.id,
					page: 'pages/route/index',
					width: '2800'
				}).then(res => {
					this.wxCode = res.data.base_url
					if (this.wxCode) {
						this.getwxCodeImg()
					}
				})
			},
			//保存二维码
			getwxCodeImg() {
				var imgSrc = this.wxCode; //base64编码
				var save = wx.getFileSystemManager();
				var number = Math.random();
				save.writeFile({
					filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg',
					data: imgSrc,
					encoding: 'base64',
					success: res => {
						this.onceCode = wx.env.USER_DATA_PATH + '/pic' + number + '.jpg'
						console.log(this.onceCode)
						if (this.onceCode && this.backgroundImg) {
							this.createNewImg()
						}else if(!this.onceCode){
							this.$msg('小程序码生成失败!')
						}else if(!this.backgroundImg){
							this.$msg('海报背景图生成失败!')
						}
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			createNewImg() {
				var that = this;
				var context = wx.createCanvasContext('mycanvas');
				console.log('画布', that.backgroundImg)
				var path = that.backgroundImg;
				context.drawImage(path, 0, 0, 375, 600);
				//绘制二维码
				let wxcode = that.onceCode
				context.drawImage(wxcode, 18, 460, 120, 120);
				//绘制名字
				// context.setFontSize(24);
				// context.setFillStyle('#fff');
				// context.setTextAlign('center');
				// context.fillText(name, 34, 620);
				context.stroke();
				context.draw();
				//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
				setTimeout(function() {
					wx.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: function(res) {
							that.imagePath = res.tempFilePath;
							if (that.imagePath) {
								that.canvasHidden = true
								that.maskHidden = true
								wx.hideToast()
							}
							console.log('海报生成成功,图片链接', that.imagePath)	
						},
						fail: function(res) {
							console.log(res);
						}
					});
				}, 900);
			},
			saveBill() {
				var that = this
				wx.saveImageToPhotosAlbum({
					filePath: that.imagePath,
					success(res) {
						wx.showModal({
							content: '图片已保存到相册，赶紧晒一下吧~',
							showCancel: false,
							confirmText: '好的',
							confirmColor: '#333',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									that.maskHidden = false
								}
							},
							fail: function(res) {
								that.maskHidden = false
							}
						})
					}
				})
			},
			// 点击复制
			copy(text) {
				uni.setClipboardData({
					data: text
				});
			},
		}
	}
</script>

<style>
	.bgImg {
		display: block;
		width: 100%;
		height: 366rpx;
	}

	.mine {
		display: block;
		text-align: center;
		color: #333;
		margin-top: 44rpx;
	}

	.code {
		display: block;
		text-align: center;
		color: #333;
		font-size: 76rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}

	.who {
		display: block;
		margin-top: 80rpx;
		font-size: 32rpx;
		color: #333;
		text-align: center;
	}

	.inputBox {
		text-align: center;
		margin-top: 44rpx;
	}

	.input {
		text-align: center;
		width: 440rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: #f5f5f5;
		font-size: 32rpx;
		display: inline-block;
	}

	.btn {
		width: 160rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: linear-gradient(90deg, rgba(255, 226, 0, 1), rgba(255, 200, 11, 1));
		box-shadow: 0px 4px 8px 0px rgba(255, 200, 11, 0.5);
		color: #333;
		font-size: 32rpx;
		display: inline-block;
		line-height: 88rpx;
		margin-left: 40rpx;
	}

	button[class="btn"]::after {
		border: 0;
	}

	.tishi {
		display: block;
		text-align: center;
		color: #999;
		margin-top: 30rpx;
	}

	.shareText {
		display: block;
		text-align: center;
		color: #333;
		font-size: 28rpx;
		margin-top: 100rpx;
	}

	.imgBox {
		text-align: center;
		width: 100%;
		margin-top: 60rpx;
		padding-bottom: 120rpx;
	}

	.img {
		display: inline-block;
		width: 100%;
		height: 100%;
	}

	.m_l {
		margin-left: 180rpx;
	}

	.zfbtn {
		display: inline-block;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: transparent;
		outline: none;
		border: 0;
		padding: 0;
	}

	button[class="zfbtn"]::after {
		border: 0;
	}

	button[class="zfbtn m_l"]::after {
		border: 0;
	}

	.imagePathBox {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.shengcheng {
		width: 80%;
		height: 80%;
		position: fixed;
		top: 50rpx;
		left: 50%;
		margin-left: -40%;
		z-index: 10;
	}

	.baocun {
		display: block;
		width: 80%;
		height: 80rpx;
		padding: 0;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		bottom: 50rpx;
		left: 10%;
		background: #ffe200;
		color: #333;
		font-size: 32rpx;
		border-radius: 44rpx;
	}

	button[class="baocun"]::after {
		border: 0;
	}
</style>