vue3 将当前的页面转换成图片

<template>
	<div class="order-detail-container" v-if="!base64">
		<div class="camera-box">
			<div class="camera-box-detail">
				<div class="camera-box-detail-row1">
					<div class="camera-box-detail-row1-right">
						<image class="img" crossOrigin="anonymous" style="width: 135px; border-radius: 3px"
							mode="widthFix" :src="objectDeatil?.image" />
					</div>
					<div class="camera-box-detail-row1-left">
						<div class="camera-box-detail-row1-left-name">
							<div>{{objectDeatil?.filmName}}</div>
							<div style="color: #ee0a24;font-size: 14px;">{{objectDeatil?.cityName}}</div>
						</div>
						<div class="camera-box-detail-row1-left-type">
							{{objectDeatil?.cinemaName}}
						</div>
						<div class="camera-box-detail-row1-left-type"> {{objectDeatil?.ticketNum}} 张</div>
						<div class="camera-box-detail-row1-left-time">
							<div class="camera-box-detail-row1-left-time1">
								{{ formatShowTimeYear(objectDeatil?.showTime) }}
							</div>
							<div class="camera-box-detail-row1-left-time2">
								{{ formatShowTime(objectDeatil?.showTime) }}

								开场
							</div>
						</div>
						<div class="camera-box-detail-row1-left-address">
							{{ objectDeatil?.address }}

						</div>
						<div class="camera-box-detail-row1-left-position-Name">
							{{ objectDeatil?.hallName }}

						</div>

						<div class="camera-box-detail-row1-left-position">
							<div class="camera-box-detail-row1-left-position-seat">
								<div class="camera-box-detail-row1-left-position-seat-item">
									{{objectDeatil?.seatInfo}}


								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="height: 50px;">

		</div>

		<div style="border-bottom: 1px solid #ccc;"></div>
		<div style="margin-top: 50px;display: flex;justify-content: center;align-items: center;">
			<canvas style="width: 200px; height: 200px" canvas-id="myQrcode1"></canvas>

		</div>





	</div>
	<div v-if="base64">
		<img :src="base64" class="custom-image" alt="">
	</div>

</template>
<script setup>
	import {
		computed,
		onMounted,
		ref
	}
	from "vue"

	import drawQrcode from "weapp-qrcode";

	import moment from "moment";
	import html2canvas from "html2canvas"


	const objectDeatil = ref({})
	const flag = ref(false)
	const base64 = ref("")

	const formatShowTimeYear = computed(() => {
		return (str) => {
			return moment(str).format("YYYY-MM-DD");
		};
	});


	const formatQrCode = computed(() => {
		return (str) => {
			return moment(str).format("YYYY-MM-DD");
		};
	});
	// 【格式化】开场时间
	const formatShowTime = computed(() => {
		return (str) => {
			return moment(str).format("HH:mm");
		};
	});
	const capturePageAsImage = () => {
		const elementToCapture = document.body; // 捕获整个页面

		html2canvas(elementToCapture, {

			allowTaint: true, //开启跨域
			useCORS: true,
			scrollY: 0,
			scrollX: 0,


		}).then(canvas => {
			// 将生成的 canvas 元素转换为图片 URL
			const imageDataURL = canvas.toDataURL('image/png');

			// 创建一个新的 Image 元素，将图片 URL 设置为源
			// const imageElement = new Image();
			// imageElement.src = imageDataURL;
			// console.log(imageElement.src, imageDataURL.slice(15));
			base64.value = imageDataURL
			console.log(base64.value, "base64.value");
			if (window.navigator.msSaveOrOpenBlob) {
				let bstr = atob(base64.value.split(",")[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				let blob = new Blob([u8arr]);
				window.navigator.msSaveOrOpenBlob(blob, "chart-download" + "." + "png");
			} else {
				// 这里就按照chrome等新版浏览器来处理
				let a = document.createElement("a");
				a.href = base64.value;
				a.setAttribute("download", "chart-download");
				a.click();
			}
		});
	}
	onMounted(() => {


		const query = uni.getLaunchOptionsSync().query;
		objectDeatil.value = query

		console.log('启动参数:', query);

		if (query) {
			objectDeatil.value = query
			// console.log(objectDeatil.value, "ppppppppp");
			drawQrcode({
				width: 200,
				height: 200,
				canvasId: "myQrcode1",
				text: query.voteCode,
			});
		}




		setTimeout(() => {
			capturePageAsImage();
		}, 100)

	})
</script>
<style lang="less">
	.custom-image {
		width: 100%;
		height: 100%;
		/* 添加其他样式规则 */
	}

	page {
		height: 100%;
		width: 100%;
	}

	.order-detail-container {

		padding: 10px 15px;
		box-sizing: border-box;

		.camera-title {
			display: flex;
			// justify-content: center;
			align-items: center;
			font-size: 14px;
			background-color: #fff;
			padding: 20px;
			border-bottom: 1px solid #eee;
			color: #15181d;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;

			.icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: linear-gradient(to right, #ff6034, #ee0a24);
				height: 50px;
				width: 50px;
				border-radius: 50px;

				// margin-right: 15px;
				.iconfont {
					font-size: 16px;
					color: #ffffff;
				}
			}

			.camera-right {
				display: flex;
				flex-direction: column;
				// align-items: center;
				justify-content: flex-start;
				margin-left: 20px;

				.camera-right-time {
					color: #858a99;
					font-size: 16px;
					display: flex;
					justify-content: center;
					align-items: center;

					.nut-countdown__content {
						color: #ee0a24 !important;
						font-size: 16px;
						font-weight: normal;
					}
				}

				.camera-right-status {
					color: #15181d;
					font-weight: 700;
					font-size: 16px;
				}
			}

			.camera-title-jt {
				font-size: 16px;
				font-weight: 700;
			}
		}

		.camera-box {
			background-color: #fff;
			// border-radius: 30px;
			padding: 20px 10px;
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;

			box-sizing: border-box;

			.camera-box-detail {

				.camera-box-detail-row1 {
					display: flex;
					justify-content: flex-start;

					// align-items: center;
					.camera-box-detail-row1-left {
						font-size: 14px;
						margin-left: 20px;

						.camera-box-detail-row1-left-name {
							color: #15181d;
							font-size: 18px;
							font-weight: 700;
							display: flex;
							justify-content: space-between;
							align-items: center;
							// margin-top: 10px;
						}

						.camera-box-detail-row1-left-time {
							color: #858a99;
							margin-top: 8px;
							display: flex;
							align-items: center;

							.camera-box-detail-row1-left-time1 {}

							.camera-box-detail-row1-left-time2 {
								color: #ee0a24;
								margin-left: 8px;
							}
						}

						.camera-box-detail-row1-left-position-Name {
							color: #858a99;
							margin-top: 8px;

							display: -webkit-box;
							/* autoprefixer: ignore next */
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.camera-box-detail-row1-left-address {
							color: #858a99;
							margin-top: 8px;

							display: -webkit-box;
							/* autoprefixer: ignore next */
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.camera-box-detail-row1-left-position {
							margin-top: 8px;
							display: -webkit-box;
							/* autoprefixer: ignore next */
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							overflow: hidden;

							color: #858a99;

							.camera-box-detail-row1-left-position-seat {
								display: flex;
								flex-wrap: wrap;

								.camera-box-detail-row1-left-position-seat-item:nth-child(n + 2) {
									margin-left: 5px;
								}
							}
						}

						.camera-box-detail-row1-left-type {
							color: #858a99;
							margin-top: 8px;
						}
					}
				}

				.camera-box-detail-row2 {
					margin-top: 25px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.camera-box-detail-row2-left {
						display: flex;
						justify-content: center;
						align-items: center;
						color: #ee0a24;
						font-weight: 700;
						font-size: 28px;

						.sanjiantouFont {
							font-size: 42px;
							margin-left: 5px;
						}
					}
				}
			}
		}





	}
</style>