pet-front/otherPages/binding/share/index.vue

<template>
  <view class="page">
    <view class="flex-colt content">
      <view style="width: 750rpx; height: 1125rpx;">
        <canvas id="myCanvas" canvas-id="firstCanvas1" type="2d" style="width: 100%; height: 100%;"></canvas>
      </view>
      
      <view class="flex-rowc btns">
        <button plain class="flex-rowc btn btn-save" @click="saveImg" >保存海报</button>
      </view>
    </view>
  </view>
  <!-- 客服组件 -->
  <CustomerService />
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useStore } from "vuex"
	import authorize from '@/utils/authorize.js'

	const store = useStore();

	const configList = computed(() => {
		return store.getters.configList
	})

	const url = ref()

	const canvasData = reactive({
		width: null,
		height: null,
		canvas: null
	})

	const savePath = ref()

	const 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 / 750

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

				canvasData.width = _canvas.width
				canvasData.height = _canvas.height

				//背景图片
				const bgImage = _canvas.createImage()
				bgImage.src = configList.value.background_poster.paramValueImage
				bgImage.onload = () => {

					ctx.drawImage(bgImage, 0, 0, width, height)
	
					//二维码图片
					const coderImage = _canvas.createImage()
					coderImage.src = url.value
					coderImage.onload = () => {
						const x = 270 * Ratio / dpr
						const y = 672 * Ratio / dpr
						const size = 197 * Ratio / dpr
						ctx.drawImage(coderImage, x, y, size, size)

						uni.hideLoading()

						setTimeout(() => {
							wx.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: _canvas.width,
								height: _canvas.height,
								canvas: _canvas,
								success: (res) => {
									let tempFilePath = res.tempFilePath;
									savePath.value = tempFilePath
									console.log('--savePath', savePath.value)
									// saveImgToPhone(tempFilePath)
								},
								fail: (err) => {
									console.log('--canvasToTempFilePath--fail', err)
								}
							});
						})
					}

				}

			})

	}

	const saveImg = () => {
		authorize('scope.writePhotosAlbum').then((res) => {
			saveImgToPhone(savePath.value)
		})
	}

	const 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);
					}
				});
			}
		});
	}

	onLoad((options) => {
		// url.value = options.url
		// 暂时用配置项
		url.value = configList.value.share_qr_url.paramValueImage

		draw()
	})
</script>

<style scoped lang="scss">
	.page {
		background-color: #FFFFFF;
		width: 100vw;
		min-height: 100vh;

		.content {
			padding-top: 19rpx;
		}

		.btns {
			width: 100%;
			margin-top: 7rpx;
		}

		.btn {
			display: inline-block;
			border: none;
			width: 594rpx;
			height: auto;
			padding: 27rpx 0;
			border-radius: 94rpx;
			background-color: #FFBF60;
			color: #FFFFFF;
			font-size: 30rpx;
			line-height: 40rpx;
		}
	}
</style>