h5-webgl-program/src/components/krpanoVideo/panoramic_no_drag.xml

<krpano version="1.20.9" title="Virtual Tour">
	<!-- <plugin name="pp_light" keep="true"
		url="https://dm.static.elab-plus.com/miniProgram/krpano/plugins/pp_light.js"
		enabled="true"
		exposure="0.0"
		lights="1.0"
		shadows="5.0"
		filterrange="60.0"
		masking="1.0"
		quality="7"
		order="1"
		phase="1"
		/>
	
	<plugin name="pp_sharpen" keep="true"
		url="https://dm.static.elab-plus.com/miniProgram/krpano/plugins/pp_sharpen.js"
		enabled="true"
		strength="5.0"
		range="5"
		quality="5"
		luminanceonly="true"
		order="2"
		phase="1"
		/> -->
	<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="4.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>
		<!-- 电子人 -->
		<hotspot name="video"
			ath="50.082" 
			atv="14"
			url="https://dm.static.elab-plus.com/videoplayer.js"
			videourl=""
			width="180"
			height="320"
			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"
			zorder="2"
			enabled="false"
		>
		</hotspot>
		<!-- 电子人的阴影 -->
		<hotspot name="image_hotspot" ath="50.082" atv="14" rotate="0" zorder="1" enabled="false"
			distorted="true" scale="1" alpha="0.5" visible="false" width="180" height="320"
			url="https://dm.static.elab-plus.com/miniProgram/shadow11.png" keep="true"></hotspot>
		<!-- 宠物视频 -->
		<hotspot name="petVideo"
			ath="80.0" 
			atv="14"
			url="https://dm.static.elab-plus.com/videoplayer.js"
			videourl=""
			width="180"
			height="180"
			chromakey="0x238E54|0.294|0.133"
			preload="true"
			pausedonstart="false"
			loop="true"
			distorted="true"
			muted="true"
			zoom="true"
			autopause="true"
			autoresume="true"
			scale="1"
			zorder="2"
			enabled="false"
		>
		</hotspot>
		<!-- 红包 -->
		<hotspot name="redBox"
			ath="60" 
			atv="14"
			url="https://dm.static.elab-plus.com/videoplayer.js"
			videourl=""
			chromakey="0x30B524|0.294|0.133"
			preload="true"
			pausedonstart="false"
			loop="true"
			distorted="true"
			muted="true"
			zoom="true"
			autopause="true"
			autoresume="true"
			scale="1"
			zorder="2"
			enabled="true"
			onclick="toggleRedBox();"
		>
		</hotspot>
		<action name="toggleRedBox">
			jscall('window.toggleRedBox()');
		</action>
		<action name="showRedBox">
			set(hotspot[redBox].visible, 'true');
			hotspot[redBox].playvideo(%1, '', false);
		</action>
		<action name="hideRedBox">
			hotspot[redBox].stop();
			set(hotspot[redBox].visible, get(false));
		</action>
		<action name="mobilescale" autorun="preinit" devices="mobile">
		    mul(stagescale,0.5);
		</action>
		<action name="rotateVideo">
			set(hotspot[video].rotate, %1);
		</action>
		<action name="playSceneName">
			def(scale, string, get(hotspot[video].scale));
		    <!-- 打印日志 -->
		    <!-- showlog(true, top); -->
		    <!-- mobilescale(); -->
		    <!-- 播放视频 -->
			set(hotspot[video].visible, 'true');
			set(hotspot[image_hotspot].visible, 'true');
		    hotspot[video].playvideo(%1, '', false);
			set(hotspot[video].scale, get(scale));
		</action>
		<action name="stopPeopleVideo">
			<!-- 播放视频 -->
			<!-- hotspot[video].playvideo('', '', false); -->
			hotspot[video].stop();
			set(hotspot[video].visible, get(false));
			set(hotspot[image_hotspot].visible, get(false));
		</action>
		<!-- 显示数字宠物 -->
		<action name="playPetVideo">
			def(scale, string, get(hotspot[petVideo].scale));
			set(hotspot[petVideo].visible, 'true');
			hotspot[petVideo].playvideo(%1, '', false);
			set(hotspot[petVideo].scale, get(scale));
		</action>
		<!-- 隐藏数字宠物 -->
		<action name="stopPetVideo">
			hotspot[petVideo].stop();
			set(hotspot[petVideo].visible, get(false));
		</action>
		
		<!-- 设置数字人缩放大小 -->
		<action name="scalePeopleChange">
			set(hotspot[video].scale, %1);
		</action>
		<!-- 设置宠物缩放大小 -->
		<action name="scalePetChange">
			set(hotspot[petVideo].scale, %1);
		</action>
		<!-- 切换状态播放，暂停 -->
		<action name="toggleMute">
			set(hotspot[video].muted, %1);
			set(hotspot[petVideo].muted, %1);
			mutesound(bgsnd,%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="playBgMusic">
		    <!-- 播放背景音乐 -->
		    playsound(bgsnd, %1, true);
			mutesound(bgsnd,%2);
			<!-- mutesound(bgsnd,%2); -->
		</action>
		<!-- 关闭所有的声音 -->
		<action name="closeVoice">
		    destroysound(bgsnd);
		</action>
		<!-- 播放音乐设置，引入插件 -->
		<plugin name="soundinterface" 
		    url="https://dm.static.elab-plus.com/soundinterface.swf"
		    alturl="https://dm.static.elab-plus.com/soundinterface.js" 
		    preload="true"
		    keep="true"
		    loop="false"
			muted="true"
		    ></plugin>
		<!-- 截图 -->
		<action name="makescreenshot_init" type="Javascript" autorun="onstart"><![CDATA[
			// 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,hasRedBox=false)
			{
				// if there is already a screenshot layer, remove it now
				console.warn("***makescreenshot***",krpano.webGL,leftX,leftY,screenshotwidth,screenshotheight)
				var canvas = krpano.webGL.canvas;
				var pix = window.devicePixelRatio;
				// make a screenshot as canvas
				var sizeinfo = {w:screenshotwidth*pix, h:screenshotheight*pix};
				var crop = {
					x:leftX*pix,
					y:leftY*pix,
					w:screenshotwidth*pix, 
					h:screenshotheight*pix
				};
				var scaledCanvas = document.createElement("canvas");
				var scaledContext = scaledCanvas.getContext('2d');
				scaledCanvas.width = 1684;//分享小图的尺寸-宽度-二倍图
				scaledCanvas.height = 1344;//分享小图的尺寸-高度-二倍图
				var unit = sizeinfo.w/scaledCanvas.width;
				var vfw = sizeinfo.w;
				var vfh = scaledCanvas.height * unit;
				var screenshotcanvas = krpano.webGL.makeScreenshot(
					canvas.width, 
					canvas.height,
					true, 
					"png",
					1.0, 
					crop, 
					sizeinfo, 
					makeScreenshotCache);
				var shotImg = '';
				var shareImg = '';
				if (screenshotcanvas)
				{
					//var imgBase64 = screenshotcanvas.toDataURL();
					// var shotImgBase64 = screenshotcanvas;
					var imgBase64 = screenshotcanvas;
					console.warn("***makescreenshot1***",vfw,vfh,scaledCanvas.width,scaledCanvas.height,hasRedBox)
					if(hasRedBox=='true'){//有前置背景
						var image = new Image();;
						image.src = imgBase64;
						image.onload = function() {
							scaledContext.save();
							scaledContext.drawImage(image,0,0,vfw,vfh,0,0,scaledCanvas.width,scaledCanvas.height);
							scaledContext.restore();
							var imageObj = new Image();;
							imageObj.src = 'https://dm.static.elab-plus.com/miniProgram/shareBg.png';
							imageObj.setAttribute("crossOrigin", "anonymous");
							imageObj.onload = function() {
								scaledContext.drawImage(imageObj,0,0,scaledCanvas.width,scaledCanvas.height,0,0,scaledCanvas.width,scaledCanvas.height);
								var img_src = scaledCanvas.toDataURL();
								screenshot(img_src,2);//生成分享的图
							}
						}
					}
					
					
					screenshot(imgBase64,1);
					function screenshot(imgBase64,type){
						var reqUrl = window.$config.api_url + 'elab-marketing-file/upload/uploadBase64';
						var data = JSON.stringify({
							base64Str: imgBase64
						})
						var request = $.ajax({
							type: "POST",
							url: reqUrl,
							contentType: 'application/json;charset=UTF-8',
							data: data
						});
						request.done(function(result) {
							console.warn("***krpano-request-result****",hasRedBox,result)
							if (result && result.success) {
								let shottingImg = result.single.filePath;
								if(type==1){
									shotImg = shottingImg;
								}else if(type==2){
									shareImg = shottingImg;
								}
								if(hasRedBox=='true'){
									if(shotImg && shareImg){
										window.show_img(shotImg,shareImg);
									}
								}else{
									window.show_img(shotImg,shareImg);
								}
							}
						});
						request.fail(function(jqXHR, textStatus) {
							console.warn("Request failed: " + textStatus);
						});
					}
				}
			}	
		]]>
		</action>
		
	</scene>
</krpano>