视频播放列表更新，增加分享海报生成

2025-01-10 18:24:40 +08:00
parent df3bc23cfc
commit 4a141878f2
34 changed files with 3399 additions and 1752 deletions
--- a/components/my-poster/my-poster.vue
+++ b/components/my-poster/my-poster.vue
@@ -0,0 +1,204 @@
+<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(() => {
+		getElRect('myCanvas').then(res => {
+			Object.assign(posterData, res)
+		})
+	})
+
+	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>