JT-CIM-ZHNY/src/views/Map3d/components/printmap.vue

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage
	} from 'element-plus';

	import {
		ref
	} from "vue";
	import {
		inject
	} from "vue";
	import html2canvas from "html2canvas";

	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div class="jt-MapPrinting">
		<div class="middleviewer">
			<el-input v-model="inputValue.mapname" placeholder="请输入地图名称" @focus="getfous" @blur="onblur" />
			<div class="viewer">
				<div id="printbox" ref="print"></div>
				<div class="viewertop" display='block' ref="thumbnailmap"></div>
				<div style="display:none" ref="originalmap"></div>
			</div>
		</div>
		<div class="viewerbottom">
			<!-- <el-button color="rgb(20 136 255)" v-print="printObj"><span style="color: #fff;font-size: 16rem;">打 印</span></el-button> -->
			<el-button color="rgb(255 100 100)" @click="download"><span style="color: #fff;font-size: 16rem;">下 载</span></el-button>
		</div>
	</div>
</template>

<script>
	let jt3d = undefined;
	export default {
		data() {
			return {
				inputValue: {
					mapname: "默认地图",
				},

				printObj: {
					id: "printbox",
					popTitle: "", // 打印配置页上方的标题
					extraCss: "background-color:red",
					preview: false, // 是否启动预览模式，默认是false
					previewTitle: " 关闭预览", // 打印预览的标题
					previewPrintBtnLabel: "点击打印", // 打印预览的标题下方的按钮文本，点击可进入打印
					zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
					previewBeforeOpenCallback() {
						console.log("正在加载预览窗口！")
					}, // 预览窗口打开之前的callback
					previewOpenCallback() {
						console.log("已经加载完预览窗口，预览打开了！");
					}, // 预览窗口打开时的callback
					beforeOpenCallback() {
						console.log("开始打印之前！");
					}, // 开始打印之前的callback
					openCallback() {
						console.log("执行打印了！");
					}, // 调用打印时的callback
					closeCallback() {
						console.log("关闭了打印工具！");
					},
					clickMounted() {
						console.log("点击v-print绑定的按钮了！");
					},
					standard: "",
					extarCss: "",
				},
			};
		},
		methods: {
			//当选择器的输入框获得焦点时触发，标题获取焦点清空输入框
			getfous() {
				this.inputValue.mapname = ""
			},

			//当选择器的输入框失去焦点时触发
			onblur() {
				//删除print组件的内容
				this.$refs.print.innerHTML = "";
				// 获取标题
				let value = this.inputValue.mapname;

				//获取输入框的缺省内容
				let text = value.length > 0 ? value : '默认地图标题';
				let canvas = this.changcanvastitile(this.$refs.originalmap.lastChild, text);
				let url = canvas.toDataURL('image/png', 5.0)
				let img = document.createElement('img');
				img.style.display = "block"
				img.style.width = canvas.style.width;
				img.style.height = canvas.style.height;
				img.src = url
				this.$refs.print.appendChild(img);
			},

			//下载按钮
			download() {
				if (this.$refs.originalmap.children.length <= 0) {
					ElMessage.error("截图未成功");
					return
				}
				let value = this.inputValue.mapname;
				//获取输入框的缺省内容
				let text = value.length > 0 ? value : '默认地图标题';

				let img = this.$refs.print.lastChild;
				let a = document.createElement('a');
				a.style.display = 'none';
				a.download = text + '.png';
				a.href = img.src;
				document.body.appendChild(a);
				a.click();
				document.body.removeChild(a);
			},

			//更新打印标题
			changcanvastitile(canvas, text) {

				//清理标题位置区域
				let width = parseInt(canvas.style.width.slice(0, -2));
				let height = parseInt(canvas.style.height.slice(0, -2));
				//获取上下文
				const ctx = canvas.getContext('2d');
				//清理标题问题
				ctx.clearRect(0, 0, width, 160)
				//设置字体
				ctx.font = "bold 50rem arial";
				document.fonts.load(ctx.font);
				//设置填充颜色
				ctx.fillStyle = "black";
				//循环输入标题,字间距50rem
				for (let i = 0; i < text.length; i++) {
					//第I个字的水平位置=((canvs.leght)/2-(text.legth)*letterspace/2+i*letterspace)
					let x = Math.ceil(width / 2) - (text.length - 1) * 50 + i * 100
					//水平绘制填充文本
					ctx.fillText(text[i], x, 100);
				}
				return canvas;
			},

			//打印地图截屏
			screenshot() {
				this.$refs.print.innerHTML = "";
				this.$refs.thumbnailmap.innerHTML = ""
				this.$refs.originalmap.innerHTML = '';
				this.inputValue.mapname = "默认地图"
				html2canvas(this.$parent.$parent.$refs.refMap3d.$refs.cesiumContainer, {

					// backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
					useCORS: true, //支持图片跨域
					scale: 1, //设置放大的倍数
					// tainTest:false,
					// foreignObjectRendering: true,//// 是否在浏览器支持的情况下使用ForeignObject渲染
					dpi: 300,
					// width:1920,
					// height:1080

				}).then(
					(canvas) => {
						let url = canvas.toDataURL('image/png', 5.0)
						let img = document.createElement('img');
						img.style.display = "block"
						img.style.width = "calc(100% - 0rem)"
						img.style.height = "calc(100% - 0rem)";
						img.src = url
						//缩略图
						this.$refs.thumbnailmap.appendChild(img);
						//创建新的canvas
						let canvasnew = this.createmap(canvas)
						let urla = canvasnew.toDataURL('image/png', 5.0)
						let imga = document.createElement('img');
						imga.style.display = "block"
						imga.style.width = canvas.style.width / 2;
						imga.style.height = canvas.style.height / 2;
						imga.src = urla
						//原图
						this.$refs.originalmap.appendChild(canvasnew);
						//打印图
						this.$refs.print.appendChild(imga)
					}
				)
			},

			createmap(img) {
				//渲染之前先清理掉所有所有指定canvas
				if (document.getElementById('canvasid')) {
					document.getElementById('canvasid').remove();
				}
				let width = parseInt(img.style.width.slice(0, -2));
				let height = parseInt(img.style.height.slice(0, -2));

				let canvas = this.createHDCanvas(width + 60, height + 160, 'block')

				//获取上下文
				const ctx = canvas.getContext('2d');
				//获取图片对象
				ctx.drawImage(img, 30, 120, width, height)
				// let value = this.$refs.refinput.value;
				let value = this.inputValue.mapname;
				let text = value.length > 0 ? value : '默认地图标题';
				console.log("text")
				console.log(text)
				ctx.clearRect(0, 0, width, 120)
				//设置字体
				ctx.font = "bold 50rem arial";
				//设置填充颜色
				ctx.fillStyle = "black";
				//循环输入标题,字间距50rem
				for (let i = 0; i < text.length; i++) {
					//第I个字的水平位置=((canvs.leght)/2-(text.legth)*letterspace/2+i*letterspace)
					let x = Math.ceil(width / 2) - (text.length - 1) * 50 + i * 100
					//水平绘制填充文本
					ctx.fillText(text[i], x, 100);
				}
				return canvas;
			},
			createHDCanvas(w = 300, h = 150, display = 'block') {
				let ratio = window.devicePixelRatio * 1 || 1;
				let canvas = document.createElement('canvas');
				canvas.id = "canvasid";
				canvas.width = w * ratio; // 实际渲染像素
				canvas.height = h * ratio; // 实际渲染像素
				canvas.style.display = display;
				canvas.style.width = `${w}rem`; // 控制显示大小
				canvas.style.height = `${h}rem`; // 控制显示大小
				canvas.style.backgroundColor = "red";
				// setTransform() 允许您缩放、旋转、移动并倾斜当前的环境
				canvas.getContext('2d').setTransform(ratio, 0, 0, ratio, 0, 0);
				return canvas;
			},
		},

		mounted() {
			// //获取角色
			// this.info = JSON.parse(localStorage.getItem("person"));
			// //获取角色id
			// this.id = this.info.id;
			// this.$bus.on("screenshot", (e) => {
			// 	console.log("aaaaa")
			// 	this.screenshot()
			// })
		},
	};
</script>

<style lang="scss" scoped>
	.jt-MapPrinting {
		width: 100%;
		height: 100%;
		overflow: hidden;

		--el-fill-color-blank: rgb(0 44 126 / 68%);
		--el-text-color-regular: rgb(216 240 255);
		--el-border-color: rgb(35 135 255);

		.middleviewer {
			height: 92%;

			.viewer {
				position: relative;
				width: 100% !important;
				height: calc(100% - 29rem) !important;
				overflow: hidden;

				.viewertop {
					width: calc(100% - 2rem);
					height: calc(100% - 2rem);
					border: 1rem solid rgb(35 135 255);
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

		.viewerbottom {
			margin: 10rem;
		}
	}

	::v-deep .el-input {
		flex-grow: 0 !important;
		width: calc(100%);
		height: 30rem !important;
		letter-spacing: 100rem;
	}

	//输入框文字颜色
	::v-deep .el-input__inner {
		color: rgb(255, 255, 255);
		text-align: center;
	}

	//输入框背景色
	::v-deep .el-input__wrapper {
		background-color: rgba(255, 255, 255, 0) !important;
	}

	::v-deep .el-button {
		border-radius: 3rem !important;
		height: 32rem;
	}

	::v-deep .el-button--primary {
		background-color: rgba(64, 158, 255, 0.6) !important;
	}

	::-webkit-scrollbar {
		width: 0rem;
	}
</style>