新增krpano页面

src/components/krpanoVideo/index.scss

@@ -1,6 +1,7 @@
 .panoramic-components {
 	position: relative;
     font-size: 12px;
+	z-index: 5;
     .refresh-btn {
         position: fixed;
         right: 20px;

src/components/krpanoVideo/index.vue

@@ -6,7 +6,7 @@
             <img src="https://dm.static.elab-plus.com/refresh-btn.png">
         </div> -->
         <!-- 引导用户  触屏图片 -->
-        <div class="prompt-720-img" :class="isTouchstart ? 'img-hide' : ''">
+        <div v-if="pvCurPageName!='webgl_clipImg'" class="prompt-720-img" :class="isTouchstart ? 'img-hide' : ''">
             <img src="https://dm.static.elab-plus.com/guide-mask.png" />
         </div>
         <!-- 封面引导 蒙层图 -->
@@ -29,6 +29,8 @@
 <script>
     // import BScroll from 'better-scroll';
     const panoramicXML = require("./panoramic.xml");
+    const panoramicNODragXML = require("./panoramic_no_drag.xml");
+	const util = require('@/utils/util.js').default;
     export default {
         data() {
             return {
@@ -40,6 +42,7 @@
                 isTouchstart: false, // 是否触屏一次
                 isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
                 videoBefore: true,//显示引导蒙层图
+				sceneLoaded:false,//场景是否加载完毕了
             }
         },
 		props:{
@@ -47,13 +50,17 @@
 				type: String,
 				default: '',
 			},
+			bgUrl: {
+				type: String,
+				default: '',
+			},
 			muted: {
 				type: [Boolean,String],
 				default: true,
 			},
 			scale: {
 				type: [Number,String],
-				default: 0.1,
+				default: 1,
 			},
 		},
 		watch: {
@@ -61,25 +68,21 @@
 				handler(newVal,oldVal) {
 					if (newVal && newVal.length>0) {
 						console.warn("***videoUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
-						if(this.panoramicKrpano){
-							// alert("**playSceneName****")
-							console.warn("***playSceneName0***")
-							wx.config({
-								debug: false,
-								appId: '',
-								timestamp: '',
-								nonceStr: '',
-								signature: '',
-								jsApiList: []
-							})
-							wx.ready(()=> {
-								// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
-								this.panoramicKrpano.call(`playSceneName(${newVal})`);
-							})
+						if(this.sceneLoaded){
+							this.playVideo(newVal)
 						}
 					}
 				},
-				deep:true,
+				immediate:true,
+			},
+			bgUrl: {
+				handler(newVal,oldVal) {
+					console.warn("***bgUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
+					if(this.panoramicKrpano){
+						this.setSphereUrl(newVal)
+					}
+				},
+				immediate: true,
 			},
 			muted: {
 				handler(newVal,oldVal) {
@@ -92,7 +95,7 @@
 			},
 			scale: {
 				handler(newVal,oldVal) {
-					console.warn("***scale-webgl_rxdz_krpanoVideo***", newVal,oldVal)
+					console.warn("***scale-webgl_rxdz_krpanoVideo***", newVal,'---',oldVal)
 					if(this.panoramicKrpano){
 						this.panoramicKrpano.call(`scaleChange(${newVal})`);
 					}
@@ -101,29 +104,35 @@
 			},
 		},
         methods: {
+			playVideo(){
+				this.panoramicKrpano.call(`playSceneName(${this.videoUrl})`);
+				// wx.config({
+				// 	debug: false,
+				// 	appId: '',
+				// 	timestamp: '',
+				// 	nonceStr: '',
+				// 	signature: '',
+				// 	jsApiList: []
+				// })
+				// wx.ready(()=> {
+				// 	// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
+				// 	this.panoramicKrpano.call(`playSceneName(${this.videoUrl})`);
+				// })
+				console.warn("***playSceneName-playVideo***")
+			},
             panoramic() {
 				console.warn("***panoramicKrpano***",this.videoUrl)
                 this.panoramicKrpano = document.getElementById('panoramic');
-				if(this.videoUrl){
-					console.warn("***playSceneName1***")
-					// this.panoramicKrpano.call(`playSceneName(${this.videoUrl})`);
-					wx.config({
-						debug: false,
-						appId: '',
-						timestamp: '',
-						nonceStr: '',
-						signature: '',
-						jsApiList: []
-					})
-					wx.ready(()=> {
-						// 在这里面进行操作即可自动播放视频，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
-						this.panoramicKrpano.call(`playSceneName(${this.videoUrl})`);
-					})
+				if(this.bgUrl){
+					// 设置全景图的路径
+					this.setSphereUrl(this.bgUrl)
 				}
-                // 设置播放的场景
+                // 场景加载完毕了
 				window.sceneload = ()=>{
 					console.warn("***sceneLoad***")
 					this.videoBefore = false;
+					this.sceneLoaded = true;
+					this.playVideo();//播放绿幕视频
 				}
                 // 视频加载完
                 window.videoready = () => {
@@ -139,6 +148,31 @@
                 // 视频暂停了,自动刷新页面, 并且保存,当前的参数
                 window.videopausedFunc = () => {
                 }
+				//截图成功了
+				window.show_img = (shottingImg) => {
+					console.warn("***show_img***",shottingImg)
+					let param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23121401', //点击ID
+						clkName: 'webgl_cover_clk', //点击前往的页面名称
+						clkParams: {
+							locusName: "封面确认",
+							locusValue: shottingImg
+						}
+					};
+					util.trackRequest(param);
+					if(window.__wxjs_environment === 'miniprogram'){
+						wx.miniProgram.postMessage({data: {bgUrl:shottingImg}})
+						wx.miniProgram.navigateBack();
+					}else{
+						window.location.href = shottingImg
+					}
+				}
+				
+				// 视频播放
+				window.onvideoplay = () => {
+					console.warn("***onvideoplay***")
+				}
 				document.addEventListener("touchend", ()=> {
 					if(this.isShowOneGuideMask==false){
 						this.isShowOneGuideMask = true;
@@ -150,32 +184,61 @@
 					console.warn("***getScaleHandle***",scale)
 				}
             },
-            // 切换场景
-            // switchScene(videoUrl) {
-            //     // 视频加载之前, 加载遮住层
-            //     this.videoBefore = true;
-            //     this.panoramicKrpano.call(`playSceneName(${videoUrl})`);
-            // },
+			makescreenshot(){
+				// let screenshotcanvas = this.panoramicKrpano.webGL("krpano[webGL]");
+				let pix = 1 || window.devicePixelRatio;
+				let x = parseInt(this.$parent.bottomLeftX*pix);
+				let y = parseInt(this.$parent.top*pix);
+				let width = parseInt(this.$parent.width*pix);
+				let height = parseInt(this.$parent.height*pix);
+				console.warn("***screenshotcanvas***",x,y,width,height)
+				this.panoramicKrpano.call("makescreenshot("
+				+ x+','
+				+ y+','
+				+ width+','
+				+ height+")");
+			},
 			getScale(){
 				let video = this.panoramicKrpano.get("hotspot[video]");
 				console.warn("***getScale***",video.scale);
 			},
 			getPosition(){
 				let video = this.panoramicKrpano.get("hotspot[video]");
-				console.warn("***getPosition***",video.ath,video.atv);
+				let posi = {
+					ath:video.ath,
+					atv:video.atv,
+				}
+				console.warn("***getPosition***",posi);
+				return posi
+			},
+			//设置全景图图片地址
+			setSphereUrl(url){
+				if(!url){
+					return false
+				}
+				this.panoramicKrpano.set("panorama_url",url)
+				console.warn("***setSphereUrl***",url);
+			},
+			//设置视频地址
+			setVideoUrl(url){
+				if(!url){
+					return false
+				}
+				this.panoramicKrpano.set("video_url",url)
+				console.warn("***setVideoUrl***",url);
 			},
         },
         mounted() {
             embedpano({
                 swf: "https://dm.static.elab-plus.com/krpano.swf",
-                xml: panoramicXML,
+                xml: this.$parent.pvCurPageName == 'add_AI_people' ? panoramicXML : panoramicNODragXML,
                 bgcolor: "#fff",
                 target: "panoramic-krpano",
                 passQueryParameters: false,
                 consolelog: true,
                 id: "panoramic",
                 mobilescale: 0.5, //移动设备缩放，1表示不缩放，默认0.5
-                onready: this.panoramic
+                onready: this.panoramic,
             });
         },
         created() {
@@ -188,7 +251,8 @@
 			if (window.innerHeight && window.screen.height) {
 				screenHeight = Math.min(window.innerHeight, window.screen.height)
 			}
-			this.canvasHeight = screenWidth;
+			this.canvasHeight = this.$parent.pvCurPageName == 'add_AI_people' ? screenWidth : screenHeight;
+			this.pvCurPageName = this.$parent.pvCurPageName
             // // 监听屏幕大小变化
             // window.addEventListener('resize', ()=>{
             // });

src/components/krpanoVideo/panoramic.xml

@@ -53,12 +53,14 @@
 
 		<image if="!(webvr.isenabled OR device.mobilevr)">
 			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,2048" /> -->
-			<sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" />
+			<!-- <sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" /> -->
+			<sphere url="%$panorama_url%" />
 		</image>
 
 		<image if="webvr.isenabled OR device.mobilevr">
 			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/vr/pano_%s.jpg" /> -->
-			<sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" />
+			<!-- <sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" /> -->
+			<sphere url="%$panorama_url%" />
 		</image>
 		<!--火车站-->
 		<!-- <hotspot name="spot2" url="skin/plugin.png" distorted="true" keep="false" ath="145.763" atv="22" visible="true"></hotspot>
@@ -68,33 +70,31 @@
 			<layer  name="title2_line1_hottiyan" style="text" align="top center" x="0" y="-80" height="80px" css="background-color:#fff;width:1px;height:80px"  />
 			<layer  name="title2_line2_hottiyan" style="text" align="top center" x="0" y="0" css="background-color:#fff;width:6px;height:6px;border-radius:50%;"  />
 		</plugin> -->
-		<!-- <preview url="test3333.png"/> -->
+		<!-- <preview url="test3333.png"/> 			onloaded.addevent="sceneload();"-->
 		<hotspot name="video"
-				ath="50.082" atv="22"
-		        url.html5="https://dm.static.elab-plus.com/videoplayer.js"
-				url.flash="https://dm.static.elab-plus.com/videoplayer.swf"
-		        videourl=""
-				width="90"
-				height="160"
-				borderwidth="1"
-				bordercolor="0xAAAAAA"
-		        chromakey="0x238E54|0.294|0.133"
-				preload="true"
-				pausedonstart="false"
-		        loop="true"
-		        distorted="true"
-				muted="true"
-		        zoom="true"
-				autopause="true"
-				autoresume="true"
-		        scale="1"
-				onvideoready="videoreadyFunc"
-		        ondown="draghotspot();"
-		        onclick="togglepause();"
-		        cursor="grab"
-				ondown.addevent="set(cursor,grabbing);"
-				onup.addevent="set(cursor,grab);"
-		        
+			ath="50.082" 
+			atv="14"
+			url="https://dm.static.elab-plus.com/videoplayer.js"
+			videourl=""
+			width="90"
+			height="160"
+			chromakey="0x238E54|0.294|0.133"
+			preload="true"
+			pausedonstart="false"
+			loop="true"
+			distorted="true"
+			muted="true"
+			zoom="true"
+			autopause="true"
+			autoresume="true"
+			scale="1"
+			onvideoready="videoreadyFunc"
+			onvideoplay="videoplayHandle"
+			ondown="draghotspot();"
+			onclick="togglepause();"
+			cursor="grab"
+			ondown.addevent="set(cursor,grabbing);"
+			onup.addevent="set(cursor,grab);"
 		/>
 		<action name="draghotspot">
 			spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r'));
@@ -114,7 +114,7 @@
 			def(scale, string, get(hotspot[video].scale));
 		    <!-- 打印日志 -->
 		    <!-- showlog(true, top); -->
-		    mobilescale();
+		    <!-- mobilescale(); -->
 		    <!-- 播放视频 -->
 		    hotspot[video].playvideo(%1, '', false);
 			set(hotspot[video].scale, get(scale));
@@ -138,6 +138,11 @@
 		    jscall('window.videoready()');
 			<!-- set(hotspot[video].scale, 0.3); -->
 		</action>
+		<!-- 视频播放 -->
+		<action name="videoplayHandle">
+		    jscall('window.onvideoplay()');
+			<!-- set(hotspot[video].scale, 0.3); -->
+		</action>
 		<!-- 引导图加载完成后 -->
 		<!-- <action name="suspendedPlay">
 		    set(hotspot[video].isVideoreadyType, true);

src/components/krpanoVideo/panoramic_no_drag.xml

@@ -0,0 +1,354 @@
+<krpano version="1.20.9" title="Virtual Tour">
+
+	<action name="mytest">
+		screentosphere(mouse.x, mouse.y, toh, tov);
+		jscall(calc('console.log("'+toh+'")'));
+		jscall(calc('console.log("'+tov+'")'));
+	</action>
+
+	<events onclick="mytest();" />
+
+	<!-- startup action - load the first scene -->
+	<action name="startup" autorun="onstart">
+		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
+		loadscene(get(startscene), null, MERGE);
+		if(startactions !== null, startactions() );
+	</action>
+	<events onloadcomplete="sceneload"></events>
+	<action name="sceneload">
+		jscall('window.sceneload()');
+	</action>
+	<scene name="mainScene" onstart="" havevrimage.mobilevr="false" havevrimage.no-mobilevr="true" lat="" lng=""
+		heading="">
+
+		<control bouncinglimits="calc:image.cube ? true : false" />
+
+		<view hlookat="50.082" vlookat="12.404" fovtype="MFOV" fov="90.000" maxpixelzoom="2.0" fovmin="70" fovmax="120"
+			limitview="auto" />
+
+		<preview
+			url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/preview.jpg" />
+
+		<image if="!(webvr.isenabled OR device.mobilevr)">
+			<sphere url="%$panorama_url%" />
+		</image>
+
+		<image if="webvr.isenabled OR device.mobilevr">
+			<sphere url="%$panorama_url%" />
+		</image>
+		<!-- <preview url="test3333.png"/> 			onloaded.addevent="sceneload();"-->
+		<hotspot name="video" ath="50.082" atv="14" url="https://dm.static.elab-plus.com/videoplayer.js" videourl=""
+			width="90" height="160" chromakey="0x238E54|0.294|0.133" preload="true" pausedonstart="false" loop="true"
+			distorted="true" muted="true" zoom="true" autopause="true" autoresume="true" scale="1"
+			onvideoready="videoreadyFunc" onvideoplay="videoplayHandle" cursor="grab"
+			ondown.addevent="set(cursor,grabbing);" onup.addevent="set(cursor,grab);" />
+		<action name="mobilescale" autorun="preinit" devices="mobile">
+			mul(stagescale,0.5);
+		</action>
+		<action name="playSceneName">
+			def(scale, string, get(hotspot[video].scale));
+			<!-- 打印日志 -->
+			<!-- showlog(true, top); -->
+			<!-- 播放视频 -->
+			hotspot[video].playvideo(%1, '', false);
+			set(hotspot[video].scale, get(scale));
+		</action>
+		<!-- 设置缩放大小 -->
+		<action name="scaleChange">
+			set(hotspot[video].scale, %1);
+		</action>
+		<!-- 获取缩放大小 -->
+		<action name="getmyScale">
+			def(scale, string, get(hotspot[video].scale));
+			jscall(calc("window.getScaleHandle('"+ get(scale) +"')") );
+		</action>
+		<!-- 切换状态播放，暂停 -->
+		<action name="toggleMute">
+			set(hotspot[video].muted, %1);
+		</action>
+		<!-- 视频初始化完成 -->
+		<action name="videoreadyFunc">
+			jscall('window.videoready()');
+			<!-- set(hotspot[video].scale, 0.3); -->
+		</action>
+		<!-- 视频播放 -->
+		<action name="videoplayHandle">
+			jscall('window.onvideoplay()');
+			<!-- set(hotspot[video].scale, 0.3); -->
+		</action>
+		<!-- 截图 -->
+		<action name="makescreenshot_init" type="Javascript" autorun="onstart"><![CDATA[
+			// Load the FileSaver.js script for saving files locally cross browser.
+			// Source: https://github.com/eligrey/FileSaver.js/
+		
+			// count the screenshots (for the filenames)
+			krpano.makescreenshot_count = 1;
+			
+			
+			// create an empty Object as makeScreenshot cache
+			var makeScreenshotCache = {};
+		
+		
+			// add a 'makescreenshot' action to krpano
+			krpano.makescreenshot = function(leftX,leftY,screenshotwidth,screenshotheight)
+			{
+				// if there is already a screenshot layer, remove it now
+				// krpano.call("removelayer(screenshot,true)");
+				console.warn("***leftX***",leftX,leftY,screenshotwidth,screenshotheight)
+				// make a screenshot as canvas
+				var sizeinfo = {w:screenshotwidth, h:screenshotheight};
+				var crop = {
+					x:leftX,
+					y:leftY,
+					w:screenshotwidth, 
+					h:screenshotheight
+				};
+				var screenshotcanvas = krpano.webGL.makeScreenshot(
+					0, 
+					0, 
+					true, 
+					"canvas", 
+					0, 
+					crop, 
+					sizeinfo, 
+					makeScreenshotCache);
+				
+				if (screenshotcanvas)
+				{
+					// example - draw something on the canvas, set to 1 to enable
+					if (0)
+					{
+						var ctx = screenshotcanvas.getContext("2d");
+						ctx.font = "25px Times";
+						ctx.fillStyle = "#FFFFFF";
+						ctx.fillText("krpano makeScreenshot() API Test", 50, screenshotcanvas.height-50);
+					}
+		
+					// add some krpano layers that show the screenshot and allow saving it
+					var imgBase64 = screenshotcanvas.toDataURL();
+
+					screenshot(imgBase64);
+					
+					function screenshot(imgBase64){
+						var savecreenshot = window.$config.api_url + 'elab-marketing-file/upload/uploadBase64';
+						var data = JSON.stringify({
+							base64Str: imgBase64
+						})
+						var request = $.ajax({
+							type: "POST",
+							url: savecreenshot,
+							contentType: 'application/json;charset=UTF-8',
+							data: data
+						});
+						  
+						request.done(function(result) {
+							console.warn("***krpano-request-result****",result)
+							if (result && result.success) {
+								let shottingImg = result.single.filePath;
+								window.show_img(shottingImg);
+							}
+						});
+						
+						request.fail(function(jqXHR, textStatus) {
+							console.warn("Request failed: " + textStatus);
+						});
+					}
+				}
+			}
+		
+		]]>
+		</action>
+		
+		<action name="makescreenshot" type="Javascript">
+			<![CDATA[
+			if (krpano.webGL && krpano.webGL.context.getContextAttributes().preserveDrawingBuffer)
+			{
+				try{
+					var canvas = krpano.webGL.canvas,
+					screenx = Number(args[1]),
+					screeny = Number(args[2]),
+					vfw = Number(args[3]),
+					vfh = Number(args[4]),
+					maxsize = Number(args[5]),
+					jpeg_quality = krpano.get('panoshot.jpeg_quality'),
+					watermark = krpano.get('panoshot.watermark'),
+					scaledCanvas=document.createElement("canvas"),
+					scaledContext=scaledCanvas.getContext('2d');
+			
+					if(vfw > vfh){
+						if(vfw > maxsize){
+							scaledCanvas.width=maxsize;
+							scaledCanvas.height=maxsize*vfh/vfw;
+						}else{
+							scaledCanvas.width=vfw;
+							scaledCanvas.height=vfh;
+						}
+					}else {
+						if(vfh > maxsize){
+							scaledCanvas.height=maxsize;
+							scaledCanvas.width=maxsize*vfw/vfh;
+						}
+						else{
+							scaledCanvas.width=vfw;
+							scaledCanvas.height=vfh;
+						}
+					}
+			
+					scaledContext.drawImage(canvas,screenx,screeny,vfw,vfh,0,0,scaledCanvas.width,scaledCanvas.height);	
+					var img_src = scaledCanvas.toDataURL("image/jpeg",+jpeg_quality);
+					screenshot(img_src,watermark);
+				}catch(err){
+					krpano.trace(3,err);
+				}
+			}else{
+				krpano.trace(3,"no webgl or no preserveDrawingBuffer");
+			}
+			  
+			function screenshot(dataURL,watermark){
+				var pluginpath = krpano.get('panoshot.snapshot_path'),
+				savecreenshot = pluginpath + 'savescreenshot.php';
+				var request = $.ajax({
+					type: "POST",
+					url: savecreenshot,
+					data: { 
+						imgBase64: dataURL,
+						watermark: watermark
+					}
+				});
+		  
+				request.done(function(file) {
+					var url = document.URL,
+					new_url = url.split("?")[0],
+					almostpath = url.substring(0,url.lastIndexOf("/")),
+					path = almostpath + '/',
+					imgurl = pluginpath +file,
+					vtb_url = krpano.get('vtbuilder_snapshotlink'),
+					scene = krpano.get('scene[get(xml.scene)].name');
+					vh = krpano.get('vh'),
+					vv = krpano.get('vv'),
+					vf = krpano.get('vf');
+					if(vtb_url !== null){new_url = vtb_url}
+					else
+					if(scene !== null){new_url = new_url + '?sceneview=' + scene + ',' + vh + ',' + vv + ',' + vf};
+					var viewurl_encode = encodeURIComponent(new_url);
+					krpano.set("viewurl", viewurl_encode);
+					krpano.set("panourl", url);
+					krpano.set("fullpath", path);
+					krpano.set("imgurl", imgurl);
+					krpano.call("show_img()");
+				});
+		
+				request.fail(function(jqXHR, textStatus) {
+					alert("Request failed: " + textStatus);
+				});
+			}
+			]]>
+		</action>
+		<action name="makescreenshot_mobile" type="Javascript">
+			<![CDATA[
+			if (krpano.webGL && krpano.webGL.context.getContextAttributes().preserveDrawingBuffer)
+			{
+				try{
+					var canvas = krpano.webGL.canvas,
+					vfw = Number(args[1]),
+					vfh = Number(args[2]),
+					maxsize = Number(args[3]),
+					jpeg_quality = krpano.get('panoshot.jpeg_quality'),
+					watermark = krpano.get('panoshot.watermark'),	
+					scaledCanvas = document.createElement("canvas"),
+					scaledContext = scaledCanvas.getContext('2d');
+				
+					scaledCanvas.style.visibility = 'hidden';
+				
+					if(vfw > vfh){
+						if( vfw > maxsize ){
+							scaledCanvas.width=maxsize;
+							scaledCanvas.height=maxsize*vfh/vfw;
+						} else {
+							scaledCanvas.width=vfw;
+							scaledCanvas.height=vfh;
+						}
+					}
+					else {
+						if( vfh > maxsize ){
+							scaledCanvas.height=maxsize;
+							scaledCanvas.width=maxsize*vfw/vfh;
+						}else{
+							scaledCanvas.width=vfw;
+							scaledCanvas.height=vfh;
+						}
+					};
+			
+					var img = new Image();
+					img.src = krpano.webGL.canvas.toDataURL();
+					img.onload = function(){
+						scaledContext.drawImage(canvas,0,0,scaledCanvas.width,scaledCanvas.height);	
+						var img_src = scaledCanvas.toDataURL("image/jpeg",+jpeg_quality);
+						
+						var blank = isCanvasBlank(document.getElementById('canvas'));
+					
+						function isCanvasBlank(scaledCanvas) {
+							var blank = document.createElement('canvas');
+							blank.width = canvas.width;
+							blank.height = canvas.height;
+						
+							return canvas.toDataURL() == blank.toDataURL();
+						}
+						if (blank) {
+							krpano.call("try_again()");
+						}
+						else {
+							screenshot(img_src,watermark)
+						}
+					}
+				}catch(err){
+				   krpano.trace(3,err);
+				}
+			}else{
+				krpano.trace(3,"no webgl or no preserveDrawingBuffer");
+			}
+			  
+			function screenshot(dataURL,watermark){
+				var pluginpath = krpano.get('panoshot.snapshot_path'),
+				savecreenshot = pluginpath + 'savescreenshot.php';
+				var request = $.ajax({
+					type: "POST",
+					url: savecreenshot,
+					data: { 
+						imgBase64: dataURL,
+						watermark: watermark
+					}
+				});
+			  
+				request.done(function(file) {
+					var url = document.URL,
+					new_url = url.split("?")[0],
+					almostpath = url.substring(0,url.lastIndexOf("/")),
+					path = almostpath + '/',
+					imgurl = pluginpath +file,
+					vtb_url = krpano.get('vtbuilder_snapshotlink'),
+					scene = krpano.get('scene[get(xml.scene)].name');
+					vh = krpano.get('vh'),
+					vv = krpano.get('vv'),
+					vf = krpano.get('vf');
+					if(vtb_url !== null){new_url = vtb_url}
+					else
+					if(scene !== null){new_url = new_url + '?sceneview=' + scene + ',' + vh + ',' + vv + ',' + vf};
+					var viewurl_encode = encodeURIComponent(new_url);
+					krpano.set("viewurl", viewurl_encode);
+					krpano.set("panourl", url);
+					krpano.set("fullpath", path);
+					krpano.set("imgurl", imgurl);
+					krpano.call("show_img()");
+				});
+
+				request.fail(function(jqXHR, textStatus) {
+					alert("Request failed: " + textStatus);
+				});
+			}
+			]]>
+		</action>
+	</scene>
+
+
+</krpano>

src/components/newBottomCom/viewAI/viewAI.vue

@@ -117,15 +117,16 @@
 						}
 					};
 					util.trackRequest(param);
-					let _ps = this.$parent.getVideoPosition();
-					let _scale = this.$parent.getVideoScale();
-					console.warn("_ps",_ps)
+					let _ps = this.$parent.getPosition();
+					let _scale = this.$parent.scale;
+					console.warn("_ps",_ps,_scale)
 					if(window.__wxjs_environment === 'miniprogram'){
 						wx.miniProgram.navigateTo({url: '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId='+(this.$route.query.houseId || '')
 						+ '&coordinate=' + encodeURIComponent(_ps) 
-						+ '&scale=' + encodeURIComponent(_scale) 
-						+ '&bgUrl='+this.$route.query.bgUrl
-						+ '&videoUrl='+encodeURIComponent(this.dataList[this.selectIndex].url)})
+						// + '&scale=' + encodeURIComponent(_scale) 
+						+ '&scale=' + _scale 
+						+ '&bgUrl=' + this.$parent.bgUrl
+						+ '&videoUrl=' + encodeURIComponent(this.dataList[this.selectIndex].url)})
 					}else{
 						Toast({
 							message: '敬请期待',

src/mixins/screenshot.js

@@ -78,10 +78,6 @@ export default {
 			gl.readPixels(this.bottomLeftX*pix, this.bottomLeftY*pix, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
 			this.flip(pixelData, width, height, 4);//入参必须是整数 width height
 			// alert("getClipPicUrl1"+width)
-			//参考 Threejs WebGLRenderer.readRenderTargetPixels
-			// let drawCanvasCtx = this.canvas.getContext('2d');
-			// let canvas = document.createElement('canvas');
-			// this.canvas2d = document.getElementById('canvas');
 			const canvas = document.getElementById('canvas');
 			let context = canvas.getContext('2d');
 			

src/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720.html

@@ -0,0 +1,14 @@
+<!--
+ * @Author: 353810753@qq.com
+ * @Date: 2023-05-17 15:46:34
+ * @LastEditors: 353810753@qq.com
+ * @LastEditTime: 2023-06-30 16:20:04
+ * @FilePath: \h5-uniApp-miniprogrgm\webgl\pages\webgl_rxdz\webgl_rxdz.html
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<div class="main-view">
+	<krpanoVideo ref="krpanoVideo" :videoUrl="videoUrl" :bgUrl="bgUrl" :muted="muted" :scale="scale"></krpanoVideo>
+	<div v-if="videoUrl" class="voice-btn rows justify-center" @click="updateMuted">
+		<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
+	</div>
+</div>

src/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720.scss

@@ -0,0 +1,23 @@
+.main-view{
+	width:100vw;
+	height:100vh;
+	overflow: hidden;
+}
+.voice-btn{
+	position: absolute;
+	width: 72px;
+	height: 72px;
+	background: rgba(0, 0, 0, 0.5);
+	right: 20px;
+	top: 20px;
+	border-radius: 50%;
+	z-index: 99999;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}

src/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720.vue

@@ -0,0 +1,71 @@
+<template src="./webgl_rxdz_krpano720.html">
+
+</template>
+<script>
+	import krpanoVideo from "@/components/krpanoVideo/index.vue";
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+	export default {
+		components: {
+			krpanoVideo,
+		},
+		mixins: [commonPageMethod],
+		/**
+		 * 页面的初始数据
+		 */
+		data() {
+			return {
+				pvCurPageName: "webgl_720",
+				locusBehaviorName: "720展示",
+				pvCurPageParams: null,
+				houseId: "",
+				pvId: 'p_2cmina_23121201',
+				navbar: {
+					showCapsule: 1,
+					title: '',
+					titleColor: '#000',
+					navPadding: 0,
+					navPaddingBg: 'transparent',
+					navBarColor: 'transparent',
+					navBackColor: 'transparent',
+					haveCallback: true, // 如果是 true 会接手 navbarBackClk
+					fromShare: false,
+					fromProject: 0,
+					shareToken: "",
+					pageName: this.pvCurPageName,
+				},
+				isIOS: false,
+				videoUrl: '',
+				bgUrl: '',
+				rangeValue: 50,
+				scale: 1,
+				muted: true,
+				coordinate: '',
+				type:'',
+			}
+		},
+		beforeDestroy() {
+			console.warn("***beforeDestroy-webgl_rxdz_krpano720***");
+		},
+		mounted(options) {
+			var that = this;
+			console.warn("***webgl_rxdz_krpano720-options***", this.$route.query)
+			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+			// this.videoUrl = this.$route.query.videoUrl || '';
+			this.videoUrl = this.$route.query.videoUrl || 'https://dm.static.elab-plus.com/miniProgram/002.mp4';
+			this.bgUrl = this.$route.query.bgUrl || 'https://elab-marketing-web.oss-accelerate.aliyuncs.com/replicate_images/1702457671501.png';
+			this.coordinate = this.$route.query.coordinate || '';
+			this.scale = this.$route.query.scale || '1';
+			this.type = this.$route.query.type || '';
+		},
+		methods: {
+			updateMuted() {
+				this.muted = !this.muted;
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_krpano720.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.html

@@ -0,0 +1,27 @@
+<div class="main-view">
+	<!-- <mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" /> -->
+	<krpanoVideo ref="krpanoVideo" :videoUrl="videoUrl" :bgUrl="bgUrl" :muted="muted" :scale="scale"></krpanoVideo>
+	<!-- <div class="guide-mask" id="guide-mask">
+		<img src="https://dm.static.elab-plus.com/coverTips.png">
+	</div> -->
+	<div class="cover-box" :style="{'width':width+'px','height':height+'px','left':left+'px','top':top+'px'}">
+		<div class="box-empty"></div>
+		<div class="left-top boundary"></div>
+		<div class="right-top boundary"></div>
+		<div class="left-bottom boundary"></div>
+		<div class="right-bottom boundary"></div>
+		<div class="operate operate1" @touchstart.stop="mytouchstart($event,'1')" @touchmove.stop="mytouchmove"></div>
+		<div class="operate operate2" @touchstart.stop="mytouchstart($event,'2')" @touchmove.stop="mytouchmove"></div>
+		<div class="operate operate3" @touchstart.stop="mytouchstart($event,'3')" @touchmove.stop="mytouchmove"></div>
+		<div class="operate operate4" @touchstart.stop="mytouchstart($event,'4')" @touchmove.stop="mytouchmove"></div>
+	</div>
+	<div class="cover-btn rows justify-center" @click.stop="clipImgHandle">
+		确认为封面
+	</div>
+	<!-- AI结果覆盖层 -->
+	<!-- <viewMask ref="viewMask" @switchActor="switchActor" style="z-index: 13;"
+	  :spaceObj="curSpaceObj" ></viewMask> -->
+	<!-- 生成截屏的画布对象 -->
+	<canvas id="canvas" type="2d" :style="{'height':'200px','top':'200px'}"></canvas>
+	<!-- <video id="myvideo" v-if="videoUrl" style="display: none;" loop muted autoplay controls="false" :src="videoUrl"></video> -->
+</div>

src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.scss

@@ -0,0 +1,150 @@
+.main-view{
+	width:100vw;
+	height:100vh;
+	overflow: hidden;
+}
+canvas:focus {
+  outline:none;
+}
+#mapDiv{
+	background-color: #fff;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+/* 生成截屏的画布对象 */
+#canvas {
+	width: 100vw;
+	z-index: -1;
+	// position: absolute;
+	left:0px;
+}
+.canvas-view{
+	position:relative;
+}
+.guide-mask {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	// background: rgba(0, 0, 0, 0.3);
+	z-index: 7;
+	position: fixed;
+	margin: auto;
+	pointer-events: none;
+	transition: opacity 0.5s ease-out;
+}
+
+.guide-mask>img {
+	width: 280px;
+	height: 406px;
+	bottom: 200px;
+	right: 0;
+	margin: auto;
+	position: fixed;
+	left: 0;
+}
+.guide-mask-hide {
+	opacity: 0;
+	pointer-events: none;
+}
+.cover-box{
+	position: absolute;
+	max-width:100vw;
+	// top:50%;
+	// left: 50%;
+	// transform: translate(-50%,-50%);
+	// width: 620px;
+	// height: 620px;
+	background: transparent;
+	z-index: 10;
+	pointer-events: none;
+	padding: 8px;
+	.box-empty{
+		// position: absolute;
+		width: 100%;
+		height: 100%;
+		// margin-top: 6px;
+		// margin-left: 6px;
+		border: 4px solid #fff;
+		// box-sizing: content-box;
+		box-shadow: rgba(0,0,0,.8) 0px 0px 0px 2005px;
+	}
+	.boundary{
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		border: solid 4px #fff;
+		pointer-events: auto;
+		z-index: 8;
+	}
+	.left-top{
+		top: 0px;
+		left: 0px;
+		border-right: none;
+		border-bottom: none;
+	}
+	.right-top{
+		top: 0px;
+		right: 0px;
+		border-left: none;
+		border-bottom: none;
+	}
+	.left-bottom{
+		bottom: 0px;
+		left: 0px;
+		border-right: none;
+		border-top: none;
+	}
+	.right-bottom{
+		bottom: 0px;
+		right: 0px;
+		border-left: none;
+		border-top: none;
+	}
+	.operate{
+		position: absolute;
+		pointer-events: auto;
+		width: 100px;
+		height: 100px;
+		z-index: 9;
+	}
+	.operate1{
+		left: -0px;
+		top: -0px;
+	}
+	.operate2{
+		right: -0px;
+		top: -0px;
+	}
+	.operate3{
+		right: -0px;
+		bottom: -0px;
+	}
+	.operate4{
+		left: -0px;
+		bottom: -0px;
+	}
+}
+.cover-btn{
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: 132px;
+	width: 292px;
+	height: 80px;
+	border-radius: 40px;
+	background: #fff;
+	font-family: "DIN Alternate Bold";
+	font-weight: 700;
+	font-size: 32px;
+	color: #222;
+	z-index: 1111;
+}

src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.vue

@@ -0,0 +1,245 @@
+<template src="./webgl_rxdz_krpanoclipImg.html">
+
+</template>
+<script>
+	import krpanoVideo from "@/components/krpanoVideo/index.vue";
+	import {getStorage} from '@/utils/localStorage';
+	import { MessageBox } from 'mint-ui';
+	var requestId = "";
+	const util = require('@/utils/util.js').default;
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	import screenshot from '@/mixins/screenshot.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+	export default {
+		components: {
+			krpanoVideo,
+		},
+		mixins: [commonPageMethod,screenshot],
+		/**
+		 * 页面的初始数据
+		 */
+		data() {
+			return {
+				pvCurPageName: "webgl_clipImg",
+				locusBehaviorName: "720设置封面",
+				pvCurPageParams: null,
+				houseId: "",
+				pvId: 'p_2cmina_23121201',
+				navbar: {
+					showCapsule: 1,
+					title: '设置封面',
+					titleColor: '#000',
+					navPadding: 0,
+					navPaddingBg: 'transparent',
+					navBarColor: 'transparent',
+					navBackColor: 'transparent',
+					haveCallback: true, // 如果是 true 会接手 navbarBackClk
+					fromShare: false,
+					fromProject: 0,
+					shareToken: "",
+					pageName: this.pvCurPageName,
+				},
+				id: '', // 户型编号
+				houseId:'',
+				canvasHeight:'',
+				isIOS: false,
+				videoUrl:'',	//绿幕视频地址
+				bgUrl:'',
+				scale:'',
+				coordinate:'',
+				muted: true, //视频是否静音
+				width:'620',
+				height:'620',
+				left:'65',
+				top:'300',
+				startX:0,
+				startY:0,
+				clientX:0,
+				clientY:0,
+				screenWidth:0,
+				screenHeight:0,
+				type:1,
+				bottomLeftX:0,
+				bottomLeftY:0,
+			}
+		},
+		beforeDestroy() {
+			console.warn("***beforeDestroy-webgl_rxdz_krpanoclipImg***");
+		},
+		mounted(options) {
+			var that = this;
+			console.warn("***webgl_rxdz_roam-options***", this.$route.query)
+			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+			this.videoUrl = this.$route.query.videoUrl || '';
+			this.bgUrl = this.$route.query.bgUrl || 'https://elab-marketing-web.oss-accelerate.aliyuncs.com/replicate_images/1702457671501.png';
+			this.coordinate = this.$route.query.coordinate || '';
+			this.scale = this.$route.query.scale || '1';
+			
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if (window.innerWidth && window.screen.width) {
+				this.screenWidth = screenWidth = Math.min(window.innerWidth, window.screen.width);
+			}
+			if (window.innerHeight && window.screen.height) {
+				this.screenHeight = screenHeight = Math.min(window.innerHeight, window.screen.height)
+			}
+			let unit = screenWidth / 750; //单位rpm 对应 px 的值
+			this.width = this.width * unit;
+			this.height = this.height * unit;
+			this.left = this.left * unit;
+			this.top = this.top * unit;
+			this.canvasHeight = screenHeight;
+			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
+			if(window.__wxjs_environment === 'miniprogram'){
+				this.navbar.showCapsule = 0;
+			}
+
+		},
+		methods: {
+			async clipImgHandle(){
+				console.warn("***clipImgHandle1***");
+				this.bottomLeftX = this.left;
+				this.bottomLeftY = this.screenHeight - this.top - this.height;
+				this.$refs.krpanoVideo.makescreenshot();
+				
+				// let shottingImg = await this.shottingAction(3);//开始截图
+				// console.warn("***clipImgHandle1***",shottingImg);
+				// // alert(shottingImg)
+				// // alert('getClipPicUrl3'+img.width)
+				// // MessageBox({
+				// // 	title: '提示',
+				// // 	message: shottingImg,
+				// // 	showCancelButton: true
+				// // });
+				// // window.open(shottingImg, "_blank");
+				// // window.location.href = shottingImg
+				// let param = {
+				// 	type: 'CLK', //埋点类型
+				// 	clkId: 'clk_2cmina_23121401', //点击ID
+				// 	clkName: 'webgl_cover_clk', //点击前往的页面名称
+				// 	clkParams: {
+				// 		locusName: "封面确认",
+				// 		locusValue: shottingImg
+				// 	}
+				// };
+				// util.trackRequest(param);
+				// if(window.__wxjs_environment === 'miniprogram'){
+				// 	wx.miniProgram.postMessage({data: {bgUrl:shottingImg}})
+				// 	wx.miniProgram.navigateBack();
+				// }else{
+				// 	// window.location.href = shottingImg
+				// }
+			},
+			navbarBackClk() {
+
+			},
+			mytouchstart(e,type) {
+				console.warn("***mytouchstart***",type)
+				this.type = type;
+				this.startLeft = this.left;
+				// this.clientX = 0;
+				// this.clientY = 0;
+				this.startX = e.changedTouches[0].clientX;
+				this.startY = e.changedTouches[0].clientY;
+				e.preventDefault();
+			},
+			mytouchmove(e) {
+				let startX = this.startX; 	// 开始x坐标 
+				let startY = this.startY; 	//开始y坐标
+				let touchMoveX = e.changedTouches[0].clientX //滑动变化坐标 
+				let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标 
+				// this.clientX = touchMoveX - startX;
+				// this.clientY = touchMoveY - startY;
+				this.widthHandle(touchMoveX,1);
+				e.preventDefault();
+			},
+			mytouchend(e) {
+				
+			},
+			widthHandle(touchMoveX){
+				let clientX = touchMoveX - this.startX;
+				if(this.type==1){//左上角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}
+					this.height = this.width;
+				}else if(this.type==2){//右上角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}
+					this.height = this.width;
+				}else if(this.type==3){//右下角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}
+					this.height = this.width;
+				}else if(this.type==4){//左下角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}
+					this.height = this.width;
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_krpanoclipImg.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_krpanoVideo/webgl_rxdz_krpanoVideo.html

@@ -7,7 +7,7 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <div class="main-view">
-	<krpanoVideo :videoUrl="videoUrl" :muted="muted" :scale="scale"></krpanoVideo>
+	<krpanoVideo ref="krpanoVideo" :videoUrl="videoUrl" :bgUrl="bgUrl" :muted="muted" :scale="scale"></krpanoVideo>
 	<div class="voice-btn rows justify-center" @click="updateMuted">
 		<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
 	</div>

src/pages/webgl_rxdz_krpanoVideo/webgl_rxdz_krpanoVideo.vue

@@ -1,4 +1,4 @@
-<template src="./webgl_rxdz_krpanoVideo.html">
+<template src="./webgl_rxdz_krpanovr.html">
 
 </template>
 <script>
@@ -16,15 +16,15 @@
 		 */
 		data() {
 			return {
-				pvCurPageName: "panor",
-				locusBehaviorName: "panor",
+				pvCurPageName: "add_AI_people",
+				locusBehaviorName: "添加数字人",
 				pvCurPageParams: null,
 				houseId: "",
 				pvId: 'p_2cmina_23080402',
 				canvas: null,
 				navbar: {
 					showCapsule: 1,
-					title: 'panor',
+					title: '添加数字人',
 					titleColor: '#000',
 					navPadding: 0,
 					navPaddingBg: 'transparent',
@@ -45,11 +45,11 @@
 			}
 		},
 		beforeDestroy() {
-			console.warn("***beforeDestroy-webgl_rxdz_krpanoVideo***");
+			console.warn("***beforeDestroy-webgl_rxdz_krpanovr***");
 		},
 		mounted(options) {
 			var that = this;
-			console.warn("***webgl_rxdz_krpanoVideo-options***", this.$route.query)
+			console.warn("***webgl_rxdz_krpanovr-options***", this.$route.query)
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 			this.videoUrl = this.$route.query.videoUrl || '';
 			this.bgUrl = this.$route.query.bgUrl || 'https://elab-marketing-web.oss-accelerate.aliyuncs.com/replicate_images/1702457671501.png';
@@ -62,6 +62,10 @@
 			updateMuted(){
 				this.muted = !this.muted;
 			},
+			getPosition(){
+				let position = this.$refs.krpanoVideo.getPosition();
+				return position;
+			},
 			rangeChange(e){
 				let sca = (this.rangeValue - 50)/50 + 1;
 				if(sca >= 1){
@@ -86,6 +90,6 @@
 	}
 </script>
 <style lang="scss" scoped>
-	@import "./webgl_rxdz_krpanoVideo.scss";
+	@import "./webgl_rxdz_krpanovr.scss";
 	/* @import "@/common/css/common.css"; */
 </style>

src/router/index.js

@@ -12,8 +12,10 @@ import webgl_rxdz_customize from '@/pages/webgl_rxdz_customize/webgl_rxdz_custom
 import webgl_rxdz_vr from '@/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue'
 import webgl_rxdz_720 from '@/pages/webgl_rxdz_720/webgl_rxdz_720.vue'
 import webgl_rxdz_clipImg from '@/pages/webgl_rxdz_clipImg/webgl_rxdz_clipImg';//webgl 截图功能
-import webgl_rxdz_krpanoVideo from '@/pages/webgl_rxdz_krpanoVideo/webgl_rxdz_krpanoVideo';//krpanoImg-720视频
+import webgl_rxdz_krpanovr from '@/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr';//krpanoImg-720视频
 import webgl_rxdz_krpanoImg from '@/pages/webgl_rxdz_krpanoImg/webgl_rxdz_krpanoImg';//krpanoImg-720图
+import webgl_rxdz_krpano720 from '@/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720';//webgl_rxdz_krpano720
+import webgl_rxdz_krpanoclipImg from '@/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg';//webgl_rxdz_krpanoclipImg
 
 Vue.use(Router)
 const router = new Router({
@@ -90,9 +92,9 @@ const router = new Router({
 			}
 		},
 		{
-			path: '/pages/webgl_rxdz_krpanoVideo',
-			name: 'webgl_rxdz_krpanoVideo',
-			component: webgl_rxdz_krpanoVideo,
+			path: '/pages/webgl_rxdz_krpanovr',
+			name: 'webgl_rxdz_krpanovr',
+			component: webgl_rxdz_krpanovr,
 			meta:{
 				keepAlive:false
 			}
@@ -104,6 +106,22 @@ const router = new Router({
 			meta:{
 				keepAlive:false
 			}
+		},
+		{
+			path: '/pages/webgl_rxdz_krpano720',
+			name: 'webgl_rxdz_krpano720',
+			component: webgl_rxdz_krpano720,
+			meta:{
+				keepAlive:false
+			}
+		},
+		{
+			path: '/pages/webgl_rxdz_krpanoclipImg',
+			name: 'webgl_rxdz_krpanoclipImg',
+			component: webgl_rxdz_krpanoclipImg,
+			meta:{
+				keepAlive:false
+			}
 		}
 		
     ],