recruitment-wechat-uniapp-241012/pages_order/mine/promotion.vue

<template>
	<view class="promotion">
		<navbar title="面对面分享" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="promotion-card">
			<image style="width: 100%;" :src="imagePath" mode="widthFix"></image>
			<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'Promotion',
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				url: '',
				title: '123123',
				baseUrl: 'https://dianpin-img.xzaiyp.top/',
				canvas: {},
				imagePath: '',
			}
		},
		onShow() {
			this.getQrCode()
			this.$store.commit('getUserInfo')
		},
		methods: {
			getQrCode() {
				this.$api('getQrCode', res => {
					if (res.code == 200) {
						this.url = res.result.url
						this.title = res.result.name
						this.draw()
					}
				})
			},
			draw() {

				uni.showLoading({
					title: "拼命绘画中..."
				})

				wx.createSelectorQuery()
					.select('#myCanvas') // 绘制的canvas的id
					.fields({
						node: true,
						size: true
					})
					.exec((res) => {
						const canvas = res[0].node
						// 渲染上下文
						const ctx = canvas.getContext('2d')
						// Canvas 画布的实际绘制宽高
						const width = res[0].width
						const height = res[0].height
						// 初始化画布大小
						const dpr = wx.getWindowInfo().pixelRatio

						//根据dpr调整
						// dpr  2 4
						//      3 6
						let Ratio = dpr * 2
						console.log("bug", dpr)
						canvas.width = width * dpr
						canvas.height = height * dpr

						this.canvas = canvas
						ctx.scale(dpr, dpr)
						ctx.clearRect(0, 0, width, height)
						
						ctx.fillStyle = '#fff'
						ctx.fillRect(0, 0, canvas.width, canvas.height)

						//用户图片
						// const image = canvas.createImage()
						// image.onload = () => {
						// 	ctx.drawImage(image, 30, 18, 40, 40)
						// }
						// image.src = '/public/img/wechar_1.png'
						// image.src = this.userInfo.headImage
						ctx.fillStyle = 'black'
						ctx.font = '22px PingFangSC-regular';

						let s = this.title || '加油站'

						ctx.fillText(s, canvas.width / Ratio - s.length * 11, 50);

						//二维码图片
						const coderImage = canvas.createImage()
						coderImage.src = this.baseUrl + this.url
						coderImage.onload = () => {
							ctx.drawImage(coderImage,
								canvas.width / Ratio - 240 / 2, 100, 240, 240)
						}


						// 绘制完成后存储路径

						setTimeout(() => {
							wx.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: this.canvas.width,
								height: this.canvas.height,
								canvas,
								success: (res) => {
									var tempFilePath = res.tempFilePath;
									this.imagePath = tempFilePath
									uni.hideLoading()
								}
							});
						}, 600);

					})

			},
			back() {
				uni.navigateBack(-1)
			},
			preservationImg(img) {
				let that = this
				uni.authorize({
					/* scope.writePhotosAlbum 类型是保存到相册 */
					scope: 'scope.writePhotosAlbum',
					success() {
						/* 已授权进入 */
						/* 保存图片到相册方法方法 */
						that.imgApi(img);
					},
					complete(res) {
						/* 判断如果没有授权就打开设置选项让用户重新授权 */
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									/* 打开设置的方法 */
									that.openInstall();
								}
							}
						});
					}
				});
			},
			imgApi(image) {
				/* 获取图片的信息 */
				uni.getImageInfo({
					src: image,
					success: function(image) {
						/* 保存图片到手机相册 */
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
									showCancel: false
								});
							},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.promotion {
		.promotion-card {
			width: 90%;
			margin: 100rpx auto 0rpx auto;
			box-shadow: 0rpx 0rpx 15rpx rgba(0, 0, 0, .2);
			border-radius: 15rpx;
			padding: 40rpx 30rpx;
			box-sizing: border-box;

			.user-info {
				display: flex;
				align-items: center;

				.image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.user-name {
					font-size: 30rpx;
				}
			}

			.invitation-code-img {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 100rpx 0rpx;

				.image {
					width: 30%;
					border-radius: 50%;
				}
			}

			.invitation-code {
				text-align: center;
				color: #818181;
				font-size: 28rpx;
			}
		}

		.btns {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			display: flex;
			background: #00aaff;
			color: white;
			font-size: 28rpx;

			.btn {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				&:nth-child(2) {
					background: orange;
				}
			}
		}
	}

	#myCanvas {
		position: fixed;
		left: 100%;
		/* visibility: hidden */
		/* visibility: hidden; */
		/* margin-top: 100rpx; */
		margin: 68rpx auto;
		width: 750rpx;
		height: 750rpx;
		/* line-height: 20px; */
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
	}
</style>