新增canvas生成作品分享小图

src/components/krpanoVideo/index.vue

@@ -306,23 +306,24 @@
 					this.$parent.winLottery();//中奖了
 				}
 				//截图成功了
-				window.show_img = (shottingImg) => {
-					console.warn("***show_img***",shottingImg)
+				window.show_img = (shotImg='',shareImg='') => {
+					console.warn("***show_img***",shotImg,shareImg)
 					let param = {
 						type: 'CLK', //埋点类型
 						clkId: 'clk_2cmina_23121401', //点击ID
 						clkName: 'webgl_cover_clk', //点击前往的页面名称
 						clkParams: {
 							locusName: "封面确认",
-							locusValue: shottingImg
+							locusValue: shotImg
 						}
 					};
 					util.trackRequest(param);
 					if(window.__wxjs_environment === 'miniprogram'){
-						wx.miniProgram.postMessage({data: {bgUrl:shottingImg}})
+						wx.miniProgram.postMessage({data: {bgUrl:shotImg,shareImg:shareImg}})
 						wx.miniProgram.navigateBack();
 					}else{
-						window.location.href = shottingImg
+						// window.location.href = shottingImg;
+						window.open(shotImg)
 					}
 				}
 				

src/components/krpanoVideo/panoramic.xml

@@ -244,6 +244,8 @@
 		<action name="toggleMute">
 			set(hotspot[video].muted, %1);
 			set(hotspot[petVideo].muted, %1);
+			<!-- set(plugin[soundinterface].mute, %1); -->
+			mutesound(bgsnd,%1);
 		</action>
 		<!-- 视频初始化完成 -->
 		<action name="videoreadyFunc">
@@ -259,10 +261,11 @@
 		    <!-- 播放背景音乐 -->
 		    ifnot(%2 == true, playsound(bgsnd, %1, true););
 		    if(%2 == true, pausesoundtoggle(bgsnd););
+			mutesound(bgsnd,get(false));
 		</action>
 		<!-- 关闭所有的声音 -->
 		<action name="closeVoice">
-		    pausesoundtoggle(bgsnd);
+		    destroysound(bgsnd);
 		</action>
 		<!-- 播放音乐设置，引入插件 -->
 		<plugin name="soundinterface" 
@@ -271,6 +274,7 @@
 		    preload="true"
 		    keep="true"
 		    loop="false"
+			muted="true"
 		    ></plugin>
 		<!-- 引导图加载完成后 -->
 		<!-- <action name="suspendedPlay">

src/components/krpanoVideo/panoramic_no_drag.xml

@@ -184,6 +184,7 @@
 		<action name="toggleMute">
 			set(hotspot[video].muted, %1);
 			set(hotspot[petVideo].muted, %1);
+			mutesound(bgsnd,%1);
 		</action>
 		<!-- 视频初始化完成 -->
 		<action name="videoreadyFunc">
@@ -198,10 +199,11 @@
 		<action name="playBgMusic">
 		    <!-- 播放背景音乐 -->
 		    playsound(bgsnd, %1, true);
+			mutesound(bgsnd,get(false));
 		</action>
 		<!-- 关闭所有的声音 -->
 		<action name="closeVoice">
-		    pausesoundtoggle(bgsnd);
+		    destroysound(bgsnd);
 		</action>
 		<!-- 播放音乐设置，引入插件 -->
 		<plugin name="soundinterface" 
@@ -210,8 +212,8 @@
 		    preload="true"
 		    keep="true"
 		    loop="false"
-		    >
-		</plugin>
+			muted="true"
+		    ></plugin>
 		<!-- 截图 -->
 		<action name="makescreenshot_init" type="Javascript" autorun="onstart"><![CDATA[
 			// count the screenshots (for the filenames)
@@ -233,6 +235,13 @@
 					w:screenshotwidth*pix, 
 					h:screenshotheight*pix
 				};
+				var scaledCanvas = document.createElement("canvas");
+				var scaledContext = scaledCanvas.getContext('2d');
+				scaledCanvas.width = 1680;//分享小图的尺寸-宽度-二倍图
+				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,
@@ -242,34 +251,56 @@
 					crop, 
 					sizeinfo, 
 					makeScreenshotCache);
-				
+				var shotImg = '';
+				var shareImg = '';
 				if (screenshotcanvas)
 				{
-					// var imgBase64 = screenshotcanvas.toDataURL();
+					//var imgBase64 = screenshotcanvas.toDataURL();
+					// var shotImgBase64 = screenshotcanvas;
 					var imgBase64 = screenshotcanvas;
-
-					screenshot(imgBase64);
+					console.warn("***makescreenshot1***",vfw,vfh,scaledCanvas.width,scaledCanvas.height)
+					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);//生成分享的图
+						}
+					}
 					
-					function screenshot(imgBase64){
-						var savecreenshot = window.$config.api_url + 'elab-marketing-file/upload/uploadBase64';
+					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: savecreenshot,
+							url: reqUrl,
 							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);
+								if(type==1){
+									shotImg = shottingImg;
+								}else if(type==2){
+									shareImg = shottingImg;
+								}
+								if(shotImg && shareImg){
+									window.show_img(shotImg,shareImg);
+								}
 							}
 						});
-						
 						request.fail(function(jqXHR, textStatus) {
 							console.warn("Request failed: " + textStatus);
 						});

src/components/newBottomCom/viewAI/viewAI.vue

@@ -239,7 +239,7 @@
 					let _ps = this.$parent.getPosition();
 					if (window.__wxjs_environment === 'miniprogram') {
 						let url = '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId=' + (this.$route.query.houseId || '') 
-						url += '&bgUrl=' + this.$parent.bgUrl
+						url += '&bgUrl=' + encodeURIComponent(this.$parent.bgUrl)
 						if(this.peopleIndex>-1){
 							let people = {
 								url:this.leftList[this.peopleIndex].url,

src/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720.html

@@ -7,8 +7,8 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <div class="main-view">
-	<krpanoVideo ref="krpanoVideo" :coordinate="coordinate" :videoUrl="videoUrl" :bgUrl="bgUrl" :muted="muted" :scale="scale"></krpanoVideo>
-	<div v-if="videoUrl" class="voice-btn rows justify-center" @click="updateMuted">
+	<krpanoVideo ref="krpanoVideo" :bgUrl="bgUrl" :muted="muted" :scale="scale"></krpanoVideo>
+	<div v-if="bgMusic || AIPeople || AIPet" class="voice-btn rows justify-center" @click="updateMuted">
 		<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
 	</div>
 	<div class="music-view rows justify-center" v-if="bgMusic.title">
@@ -29,11 +29,11 @@
 				<span class="win-unit">￥</span>{{result.amount}}
 			</div>
 			<div class="win-messges">恭喜发财，大吉大利</div>
-			<div class="btn btn-style rows justify-center">立即收下</div>
+			<div class="btn btn-style rows justify-center" @click="closeLottery">立即收下</div>
 		</div>
 		<!-- 过期 -->
 		<div class="main fail" v-else-if="result.status==4">
-			<div class="iconfont icon-cancel"></div>
+			<div class="iconfont icon-cancel" @click="closeLottery"></div>
 			<div class="common-title">
 				红包已过期
 			</div>
@@ -42,11 +42,11 @@
 				去广场看看其他作品吧
 			</div>
 			<img class="common-img" src="https://dm.static.elab-plus.com/miniProgram/red-fail.png" alt=""></img>
-			<div class="btn common-style rows justify-center">知道了</div>
+			<div class="btn common-style rows justify-center" @click="closeLottery">知道了</div>
 		</div>
 		<!-- 抢完了 -->
 		<div class="main fail" v-else-if="result.status==3">
-			<div class="iconfont icon-cancel"></div>
+			<div class="iconfont icon-cancel" @click="closeLottery"></div>
 			<div class="common-title">
 				红包已抢完
 			</div>
@@ -55,7 +55,7 @@
 				去广场看看其他作品吧
 			</div>
 			<img class="common-img1" src="https://dm.static.elab-plus.com/miniProgram/red-over.png" alt=""></img>
-			<div class="btn common-style rows justify-center">知道了</div>
+			<div class="btn common-style rows justify-center" @click="closeLottery">知道了</div>
 		</div>
 	</div>
 </div>

src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.vue

@@ -51,7 +51,7 @@
 				width:'620',
 				height:'620',
 				left:'65',
-				top:'300',
+				top:'150',
 				startX:0,
 				startY:0,
 				clientX:0,
@@ -65,6 +65,7 @@
 				AIPet:'',
 				bgMusic:'',
 				redBox:'',
+				bili: 2/3,
 			}
 		},
 		beforeDestroy() {
@@ -93,7 +94,7 @@
 			}
 			let unit = screenWidth / 750; //单位rpm 对应 px 的值
 			this.width = this.width * unit;
-			this.height = this.height * unit;
+			this.height = parseInt(this.height/this.bili) * unit;
 			this.left = this.left * unit;
 			this.top = this.top * unit;
 			this.canvasHeight = screenHeight;
@@ -123,34 +124,6 @@
 				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() {
 
@@ -198,7 +171,7 @@
 							this.width = 200;
 						}
 					}
-					this.height = this.width;
+					this.height = parseInt(this.width/this.bili);
 				}else if(this.type==2){//右上角
 					if(clientX < 0){//左移动
 						let _juli = Math.abs(clientX);
@@ -217,7 +190,7 @@
 							this.width = this.screenWidth;
 						}
 					}
-					this.height = this.width;
+					this.height = parseInt(this.width/this.bili);
 				}else if(this.type==3){//右下角
 					if(clientX < 0){//左移动
 						let _juli = Math.abs(clientX);
@@ -236,7 +209,7 @@
 							this.width = this.screenWidth;
 						}
 					}
-					this.height = this.width;
+					this.height = parseInt(this.width/this.bili);
 				}else if(this.type==4){//左下角
 					if(clientX < 0){//左移动
 						let _juli = Math.abs(clientX);
@@ -255,7 +228,7 @@
 							this.width = 200;
 						}
 					}
-					this.height = this.width;
+					this.height = parseInt(this.width/this.bili);
 				}
 			}
 		}

src/services/request.js

@@ -1,5 +1,6 @@
 import store from "@/store";
 import axios from 'axios';
+import router from "@/router";
 import {getStorage, removeItem} from '@/utils/localStorage'
 var requestCount = 0; //记录下同时的请求数
 // import ElementUI from 'element-ui';
@@ -31,10 +32,10 @@ axios.interceptors.request.use(function(config) {
 			showToast = true;
 		} else {//uploadOss 上传format文件过大时提示不成功，接口500，通过测试与header有关，注释掉上传的header就好了
 			if (!config.url.includes('elab-marketing-sms/aliyun/openapi/uploadOss')){
-				let userinfo = getStorage('userInfoThing');
-				config.headers['userId'] = userinfo ? JSON.parse(userinfo).dataUserId : '';
-				config.headers['ip'] = getStorage('ip');
-				config.headers['maiya_token'] =  getStorage('userInfoThing') ? JSON.parse(getStorage('userInfoThing')).maiya_token || "" : ""; //token
+				config.headers['userId'] = mapVue.$route.query.leavePhoneCustomerId || '';
+				config.headers['openId'] = mapVue.$route.query.openid || '';
+				// config.headers['ip'] = getStorage('ip');
+				// config.headers['maiya_token'] =  getStorage('userInfoThing') ? JSON.parse(getStorage('userInfoThing')).maiya_token || "" : ""; //token
 			}
 		}
 	}