new_app/components/my-poster/my-poster.vue

<template>
	<view class="qrcode">
		<up-qrcode :size="qrcodeData.size" :val="qrcodeData.val" @result="qrcodeResult"></up-qrcode>
	</view>
	<view class="poster-box" @click="hide">
		<view class="bg-fff container" @click.stop>
			<canvas canvas-id="myCanvas" class="myCanvas" id="myCanvas" style="width: 100%;flex: 1;"></canvas>
		</view>
	</view>


	<up-popup :show="posterData.result?true:false" mode="center" width="700rpx" closeOnClickOverlay @close="reset">
		<image :src="posterData.result" mode="widthFix"></image>
	</up-popup>

</template>

<script setup>
	import {
		getElRect
	} from '@/utils/util.js'
	import {
		ref,
		onMounted,
		getCurrentInstance,
		reactive,
		computed
	} from 'vue'
	let show = ref(false)
	function reset(){
		ctx.clearRect(0,0,posterData.width,posterData.height)
		show.value=false
		qrcodeData.val=''
		qrcodeData.result=''
		posterData.result=''
	}
	const qrcodeData = reactive({
		val: '',
		result: '',
		size: 80
	})

	let posterData = reactive({
		width: 0,
		height: 0,
		result: ''
	})
	const ctx = uni.createCanvasContext('myCanvas')

	function qrcodeResult(e) {
		console.log(e);
		qrcodeData.result = e
		console.log(posterData);
		const gap = 10
		show.value = true
		ctx.setFillStyle('#fff')
		ctx.fillRect(0, 0, posterData.width, posterData.height)
		uni.downloadFile({
			url: posterData.bigImg,
			success(res) {
				if (res.statusCode == 200) {
					uni.getImageInfo({
						src: res.tempFilePath,
						success(imageInfo) {
							console.log(imageInfo);
							const bili = imageInfo.width / imageInfo.height
							const width = posterData.width - gap * 2
							console.log(width);
							console.log(width / bili);
							ctx.drawImage(res.tempFilePath, gap, gap, width, width / bili, 0, 0)
							ctx.drawImage(e, posterData.width - qrcodeData.size - gap, posterData.height -
								gap - qrcodeData.size, qrcodeData.size, qrcodeData.size)
							ctx.setFillStyle('#000')
							ctx.setFontSize(14);
							ctx.fillText(posterData.title, gap, posterData.height - gap - 20)
							ctx.setFillStyle('#999')
							ctx.setFontSize(12);
							ctx.fillText(posterData.tips, gap, posterData.height - gap)
							ctx.draw()
							setTimeout(() => {
								uni.canvasToTempFilePath({
									x: 0,
									y: 0,
									width: posterData.width,
									height: posterData.height,
									destWidth: posterData.width,
									destHeight: posterData.height,
									canvasId: 'myCanvas',
									quality: 1,
									success: function(res) {
										// 在H5平台下，tempFilePath 为 base64
										console.log(res.tempFilePath)
										posterData.result = res.tempFilePath
									}
								})
							}, 600)

						}
					})

				} else {
					uni.showToast({
						title: '封面图下载失败'
					})
				}
				console.log(res);

			}
		})

		show.value = true
	}

	const props = defineProps({
		bigImg: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})


	function make(data) {
		uni.showLoading({
			title: '二维码生成中……'
		})
		Object.assign(posterData, data)
		qrcodeData.val = data.qrcode

		return
	}

	onMounted(() => {
		// #ifdef H5
		getElRect('myCanvas').then(res => {
			Object.assign(posterData, res)
		})
		// #endif
		
	})

	function hide() {
		show.value = false
	}


	let canvasConfig = reactive({
		width: '',
		height: ''
	})

	const canvasStyle = computed(() => {
		return {
			width: '',
			height: ''
		}
	})

	defineExpose({
		make
	})
</script>

<style lang="scss" scoped>
	.qrcode {
		position: fixed;
		top: -9999px;
		left: -9999px;
		opacity: 0;
	}

	.u-popup {
		position: fixed !important;
	}

	::v-deep .u-popup {
		position: fixed !important;
	}

	.poster-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9999;
		background-color: rgba(0, 0, 0, .5);
		transform: translateY(-100%);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: all .3s ease-in-out;
		padding: 30rpx;

		.container {
			width: 100%;
			flex: 1;
		}

		&.show {
			transform: translateY(0px);
		}
	}
</style>