pet-front/otherPages/workbenchManage/bindUser/sharing.vue

<template>
	<view class="page">
		<view class="flex content">

			<view style="width: 698rpx; height: 1163rpx;">
				<canvas id="myCanvas" canvas-id="firstCanvas1" type="2d" style="width: 100%; height: 100%;"></canvas>
			</view>

			<view class="flex btns">
				<button plain class="flex btn btn-save" @click="saveImg">保存到相册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	
	import {
		binBaseInfo,
		bindCode,
	} from "@/api/home.js"
	

	export default {
		data() {
			return {
				wxCodeImage: null,
				canvas: {},
				data : {},
				baseInfo : {},
			}
		},
		computed: {
			...mapState(['configList'])
		},
		onLoad() {
			this.baseInfo = JSON.parse(uni.getStorageSync("baseInfo"))
			this.getBaseInfo()
		},
		onReady() {
			// this.fetchQrCode()
		},
		methods: {
			async fetchQrCode() {
				try {
					const url = (await this.$fetch('getQrCode'))?.url

					this.wxCodeImage = this.$config.aliOss.url + url

					console.log('--wxCodeImage', this.wxCodeImage)

					this.draw()
				} catch (err) {

				}
			},
			getBaseInfo(){
				binBaseInfo(this.baseInfo.userId).then(res => {
					this.baseInfo = res.data
				})
				bindCode(this.baseInfo.userId).then(res => {
					this.data = res.data
					this.draw()
				})
			},
			draw() {

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

				wx.createSelectorQuery()
					.select('#myCanvas') // 绘制的canvas的id
					.fields({
						node: true,
						size: true
					})
					.exec(async (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
						console.log("--dpr", dpr)
						canvas.width = width * dpr
						canvas.height = height * dpr

						let Ratio = canvas.width / 598

						this.canvas = canvas
						ctx.scale(dpr, dpr)
						ctx.clearRect(0, 0, width, height)

						//背景图片
						const bgImage = canvas.createImage()
						bgImage.src = this.data.bj_url ||
							'https://image.hhlm1688.com//upload/组3833x_1742803627396.png'
						bgImage.onload = () => {

							ctx.drawImage(bgImage, 0, 0, width, height)

							//二维码图片
							const coderImage = canvas.createImage()
							coderImage.src = this.data.url
							coderImage.onload = () => {
								const x = 197 * Ratio / dpr
								const y = 572 * Ratio / dpr
								// const y = 562 * Ratio / dpr
								const size = 206 * Ratio / dpr
								ctx.drawImage(coderImage, x, y, size, size)

								uni.hideLoading()
							}

						}

					})

			},
			saveImg() {
				this.$authorize('scope.writePhotosAlbum').then((res) => {
					this.imgApi()
				})
			},
			imgApi() {
				wx.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.canvas.width,
					height: this.canvas.height,
					canvas: this.canvas,
					success: (res) => {
						let tempFilePath = res.tempFilePath;
						this.saveImgToPhone(tempFilePath)
					},
					fail: (err) => {
						console.log('--canvasToTempFilePath--fail', err)
					}
				}, this);

			},
			saveImgToPhone(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 scoped lang="scss">
	.page {
		// height: 100vh;
	}

	.content {
		margin-top: 79rpx;
		flex-direction: column;
	}

	.btns {
		justify-content: center;
		margin-top: 53rpx;
		display: flex;
	}

	.btn {
		display: flex;
		width: 520rpx;
		height: 90rpx;
		font-size: 36rpx;
		line-height: 1;
		color: #FFFFFF;
		border-radius: 45rpx;
		margin: 0;
		justify-content: center;
		align-items: center;
		border: none;
		&-save {
			background: #FFBF60;
		}
	}
</style>