h5-webgl-program/src/components/newBottomCom/viewMask/viewMask.vue

<template src="./viewMask.html">

</template>
<script>
	const util = require('@/utils/util.js').default;
	// const config = require('@/services/url$config.js');
	import touchHandle from '@/mixins/touchHandle.js';
	// import requestConfig from '@/static/lib/requestConfig';
	// const app = getApp(); //获取应用实例
	export default {
		mixins: [touchHandle],
		data: function() {
			return {
				currentIndex:0,	//当前看到的图片序号
				showAIImage: false,//是否显示当前AI结果集合 默认不显示，因为没有
				aiImagesList:[
				],//AI生成的图片列表
				
				styleList: [], //风格列表数据
				curStyleIndex: 0, //当前选中的风格序号
				aiFlag:false,
				aiImage: "",
				inputBase64Url: "",
				taskId: "", // 图生图任务ID
				img2imgTimer: null,
				imageWidth: 750,
				imageHeight: 448,
				showAIFlag:false,//继续生成状态切换标志
				checked:false,
				shottingImg:'',
				count:0,
				random:1,
				disableAble:false,
				spaceTypes: [{
						icon: "",
						title: "卧室",
						subtitle: "0个布局",
						englishRemark: "bedroom",
					},
					{
						icon: "",
						title: "客厅",
						subtitle: "0个布局",
						englishRemark: "living room",
					},
					{
						icon: "",
						title: "餐厅",
						subtitle: "0个布局",
						englishRemark: "dinning room",
					},
					{
						icon: "",
						title: "厨房",
						subtitle: "0个个布局",
						englishRemark: "kitchen",
					},
					{
						icon: "",
						title: "玄关",
						subtitle: "0个布局",
						englishRemark: "hallway",
					},
					{
						icon: "",
						title: "卫生间",
						subtitle: "0个布局",
						englishRemark: "bathroom",
					},
					{
						icon: "",
						title: "衣帽间",
						subtitle: "0个布局",
						englishRemark: "walkin closet",
					},
					{
						icon: "",
						title: "收纳",
						subtitle: "0个布局",
						englishRemark: "storage room",
					},
					{
						icon: "",
						title: "阳台",
						subtitle: "0个布局",
						englishRemark: "balcony",
					},
					{
						icon: "",
						title: "飘窗",
						subtitle: "0个布局",
						englishRemark: "bay window",
					},
					{
						icon: "",
						title: "链接空间",
						subtitle: "0个布局",
						englishRemark: "connecting space between two rooms",
					},
					{
						icon: "",
						title: "自定义",
						subtitle: "0个布局",
						englishRemark: "room",
					},
				],
				myloading:false,
				loadingMsg:'',
			}
		},
		props:{
			spaceObj: {
				type: Object,
				default: null,
			},
		},
		watch: {
			spaceObj(newVal, oldVal) {
				if (newVal == null) {
					return;
				}
				console.log("当前空间数据view-mark-watch:", newVal);
				this.getAiBeautyFamily();
				// this.curSpaceArea = parseFloat(
				// 	(newVal.spaceWidth * newVal.spaceHeight) / 10000
				// ).toFixed(2);
				// this.getOverallArrangementDetailsList();
			},
		},
		mounted() {//组件挂载时事件
			// console.warn("***mounted-nav***",this.seedItem)
			// if(this.seedItem){
			// 	this.title = this.seedItem.seedText;
			// }
		},
		// 页面被展示时执行
		onPageShow: function() {  
			
		},
		//页面被隐藏时执行
        onPageHide: function() {
        },
		beforeDestroy:function(){
			console.warn("***beforeDestroy***");//更新到页面上的数据
			this.clearInterval();
		},
		computed: {
			aiData() {
				return this.$store.state.aiData;
			},
			curHouseObj() {
				return this.$store.state.curHouseObj;
			},
		},
		methods:{
			swiperChangeImg(e){
				this.currentIndex = e.detail?e.detail.current:e;
				this.checked = this.aiImagesList[this.currentIndex].checked;
				console.warn("***swiperChangeImg***",this.checked);//更新到页面上的数据
			},
			//视角切换
			switchActor(){
				// this.$parent.clearHandle()
				this.$emit('switchActor');
				this.showAIImage = false;//隐藏AI结果集合-执行切换视角
				let index = this.$parent.currentActor.userIndex;//当前视角的序号
				let nextIndex = (index + 1) % this.$parent.actors.length;
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080417', //点击ID
					clkName: 'changeangle_clk', //点击前往的页面名称
					clkParams: {
						locusName: "视角切换",
						type:this.$parent.actors[nextIndex].actorEum
					}
				};
				util.trackRequest(param);
			},
			showOrHideWebGl(){
				// this.$parent.clearHandle()
				this.showAIImage = !this.showAIImage;
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080415', //点击ID
					clkName: 'contrast_clk', //点击前往的页面名称
					clkParams: {
						locusName: "对比",
					}
				};
				util.trackRequest(param);
				// setTimeout(()=> {
				// 	if(this.showAIImage==true){
				// 		this.$parent.clearHandle()
				// 	}else{
				// 		this.$parent.attendEvent()
				// 	}
				// }, 100);
			},
			//保存到相册
			save() {
			    //表示canvas正在绘制，不能进行保存
			    if (!this.aiImagesList || this.aiImagesList.length==0) {
			        return false;
			    }
				var _resultImg = this.aiImagesList[this.currentIndex].image;
			    //正在选择照片，不能生效
			    if (!_resultImg || _resultImg.length==0) {
					this.showToast("请选中图片后再试！");
			        return false;
			    }
			    var para = {
			        type: 'CLK', //埋点类型
			        clkId: 'clk_2cmina_56', //点击ID,固定
			        clkName: "share-savepic", //点击名称
			        expand: {
			            "resultImg": (_resultImg || ""),
			        },
			    }
			    util.trackRequest(para);
				if(navigator.userAgent.toLocaleLowerCase().includes('micromessenger')){
					this.$message("请长按图片保存！");
				}else{
					this.saveImageHandle(_resultImg);
				}
			},
			downloadIamge(imgsrc) {  //下载图片地址和图片名
				var fileName = "4DImage" + util.formatDate(new Date(), "yyyyMMddhhmmss") + '.jpg';
				const image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute("crossOrigin", "anonymous");
				image.onload = ()=> {
					// let canvas = document.createElement("canvas");
					// canvas.width = image.width;
					// canvas.height = image.height;
					// const context = canvas.getContext("2d");
					// context.drawImage(image, 0, 0, image.width, image.height);
					// const url = canvas.toDataURL("image/jpg"); //得到图片的base64编码数据
					const a = document.createElement("a"); // 生成一个a元素
					const event = new MouseEvent("click"); // 创建一个单击事件
					a.download = fileName || "photo"; // 设置图片名称
					a.href = imgsrc; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
					this.showToast("保存成功！");
				};
				image.src = imgsrc;
			},
			saveImageHandle(_resultImg){
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080414', //点击ID
					clkName: 'download_clk', //点击前往的页面名称
					clkParams: {
						locusName: "下载",
						img:_resultImg
					}
				};
				util.trackRequest(param);
				this.downloadIamge(_resultImg);
			},
		
			//选项变更
			changeAIImg() {
				// let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
				this.checked = !this.checked;//变更选项
				this.aiImagesList[this.currentIndex].checked = this.checked;
				console.warn("***changeAIImg***",this.checked,this.aiData)
				if(this.aiData){//给上一个页面回传生成的数据
					let space = this.aiData.find(it=>{
						return it.spaceId == this.spaceObj.spaceId
					})
					if(space){
						space.aiImagesList[this.currentIndex].checked = this.checked;
					}
				}
				if(this.checked){
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080418', //点击ID
						clkName: 'chooseprogramme_clk', //点击前往的页面名称
						clkParams: {
							locusName: "选定风格/视角",
							style:this.styleList[this.curStyleIndex].styleName,
							img:this.aiImagesList[this.currentIndex].image,
						}
					};
					util.trackRequest(param);
				}
			},
			rightScroll(){//右滑
				if(this.currentIndex <= (this.aiImagesList.length - 1) && this.currentIndex > 0){
					// this.currentIndex --;
					this.$refs.carousel.prev();
				}
			},
			leftScroll(){//继续生成
				if(this.currentIndex != this.aiImagesList.length - 1){
					if(this.currentIndex<this.aiImagesList.length - 1){
						// this.currentIndex ++;
						this.$refs.carousel.next();
					}
					return false;
				}
				console.log("***leftScroll***",this.currentIndex,this.aiImagesList.length)
				this.aiSubmit(2);//继续生成下一张
			},
			//返回上一页
			goback(){
				this.$router.go(-1);
			},
			mynavigateFuc(e) {
				if (e) {
					// this.$parent.clearHandle();
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080408', //点击ID
						clkName: 'WeCom_clk', //点击前往的页面名称
						clkParams: {
							locusName: "联系定制",
						}
					};
					util.trackRequest(param);
					if(window.__wxjs_environment === 'miniprogram'){
						wx.miniProgram.navigateTo({url: '/pages/transfer/transfer?event=openCustomerServiceChat&houseId='+this.$store.state.houseId})
					}else{
						this.$message.warning("敬请期待");
					}
					// setTimeout(()=> {
					// 	if(this.showAIImage==true){
					// 		this.$parent.clearHandle()
					// 	}else{
					// 		this.$parent.attendEvent()
					// 	}
					// }, 100);
				}
			},
			catchTapEvent:function(){
				return false;
			},
			//获取AI风格列表
			async getAiBeautyFamily() {
				// const spaceName = this.spaceTypes[this.spaceObj.spaceType - 1].title;
				let res = await requestConfig("getHardboundEffects", {
					"houseId": this.$route.query.houseId,
					"spaceType": this.spaceObj.spaceType,
					"spaceName": this.spaceObj.spaceName,
				});
				this.styleList = [];
				if (res.success) {
					let list = res.list;
					this.styleList = list;
				}
				if(!this.styleList || this.styleList.length==0){
					this.disableAble = true;//不能点击-没有风格
					let unit = window.screen.width / 750;//单位rpm 对应 px 的值
					this.$parent.canvasHeight = window.screen.height - (208 * unit);
					this.$parent.camera.aspect = window.screen.width / this.$parent.canvasHeight;
					this.$parent.camera.updateProjectionMatrix();
					this.$parent.renderer.setSize(window.screen.width, this.$parent.canvasHeight);
				}else{
					this.disableAble = false;//可以点击
				}
			},
			clearInterval() {
				if (this.img2imgTimer) {
					clearInterval(this.img2imgTimer);
					this.img2imgTimer = null;
				}
				this.random = 1;
				this.myloading = false;
			},
			//风格选择
			selectStyle(idx){
				if(this.curStyleIndex == idx){
					return false
				}
				this.curStyleIndex = idx;
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080416', //点击ID
					clkName: 'AIstyle_ret_clk', //点击前往的页面名称
					clkParams: {
						locusName: "AI 风格",
						type:this.styleList[this.curStyleIndex].styleName
					}
				};
				util.trackRequest(param);
			},
			// AI渲染
			async aiSubmit(type) {
				if(!this.styleList || this.styleList.length==0 || this.curStyleIndex==-1
				|| !this.styleList[this.curStyleIndex].prompt || !this.styleList[this.curStyleIndex].negativePrompt){
					return false;
				}
				// 防止连续点击处理
				if (this.aiFlag) {
					return
				}
				this.aiFlag = true;
				if (this.aiImage == "" || !this.aiImage) {
					this.aiImage = ""; // https://dm.static.elab-plus.com/CE4/backImg.png
				}
				this.aiImage = "";
			
				this.clearInterval();
				if(!this.showAIImage){
					this.myloading = true;
					this.loadingMsg = "设计中...";
					// this.$store.state.loading = true;
					// this.$store.state.loadingMsg="设计中...";
				}
				
				// this.inputBase64Url = await this.shottingAction(2);//开始截图-返回的是base64的数据
				// this.startServer();
				// let base64 = await this.$parent.shottingAction(2);//开始截图-返回的是base64
				let shottingImg = await this.$parent.shottingAction();//开始截图-返回的是图片地址
				if(!shottingImg){
					this.showToast("渲染失败，请重试");
					return false;
				}
				// ?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg //阿里OSS
				// "?imageMogr2/auto-orient/format/webp/blur/1x0/quality/75";//七牛云压缩图片
				shottingImg += "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//压缩图片
				this.shottingImg = shottingImg;
				this.changeImg2Base64(this.shottingImg, false);
				console.warn("***shottingImg***",this.shottingImg)
				if(type==1){
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080413', //点击ID
						clkName: 'AIcreate_clk', //点击前往的页面名称
						clkParams: {
							locusName: "AI生成",
							userparamter:{
								shottingImg:this.shottingImg,
								style:this.styleList[this.curStyleIndex].styleName
							}
						}
					};
					util.trackRequest(param);
				}else{
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080419', //点击ID
						clkName: 'continueAIcreate_clk', //点击前往的页面名称
						clkParams: {
							locusName: "继续生成",
							userparamter:{
								shottingImg:this.shottingImg,
								style:this.styleList[this.curStyleIndex].styleName
							}
						}
					};
					util.trackRequest(param);
				}
			},
			image2Base64(imgUrl) {//导入的图片路径
				var toBase64= new Promise(function(resolve, reject){
				    window.URL = window.URL || window.webkitURL;
				    var xhr = new XMLHttpRequest();
				    xhr.open("get", imgUrl, true);
				    // 至关重要
				    xhr.responseType = "blob";//文件流
				    xhr.onload = function (res) {
				        if (res.currentTarget.status == 200) {
				            //得到一个blob对象
				            var blob = res.currentTarget.response;
				            // 至关重要
				            let oFileReader = new FileReader();
				            oFileReader.onloadend = function (e) {
					            let base64 = e.target.result;//base64
					            resolve(base64)
				            };
				            oFileReader.readAsDataURL(blob);
				        }
			        }
				    xhr.send();
			    });
				return toBase64;
			},
			changeImg2Base64(url, isRepeat) {
				var self = this;
				if(isRepeat && self.inputBase64Url){//重复使用
					self.startServer();
				}else{
					// self.inputBase64Url = Base64Url;
					// console.log("生成inputBase64Url");
					this.image2Base64(url).then(base64 => {
						self.inputBase64Url = base64;
						self.startServer();
					})
					// uni.request({
					// 	url: url,
					// 	method: "GET",
					// 	responseType: "arraybuffer",
					// 	success: async (res) => {
					// 		let base64 = wx.arrayBufferToBase64(res.data);
					// 		let Base64Url = "data:image/jpeg;base64," + base64;
					// 		// console.log('base64：', Base64Url);
					// 		self.inputBase64Url = Base64Url;
					// 		console.log("生成inputBase64Url");
					// 		self.startServer();
					// 	},
					// });
				}
			},
			//开始图生图流程
			async startServer() {
				if(!this.styleList || this.curStyleIndex < 0 || !this.styleList[this.curStyleIndex].imgUrl){
					return false
				}
				let imgUrl = this.styleList[this.curStyleIndex].imgUrl;
				// let base64Url = await this.image2Base64(imgUrl);
				let data = {
					"configType": "AI_Biography",
					"keyvalue": "ControlNet_IpAdapter",
					"model": "ip-adapter_xl [4209e9f7]",
					"cpu": "ip-adapter_clip_sdxl",
					"session_hash": Date.now(),
					"weight": 1.5,
					"number1": -1,
					"number2": -1,
					"number3": 0,
					"number4": 1,
					// "imageBase64": base64Url,
					"imageUrl":imgUrl,
				}
				let res1 = await requestConfig("AIuploadImgControlNet", data);
				if(!res1 || !res1.single){
					this.showToast("渲染失败，请重试");
					this.aiFlag = false;
					this.aiImage = "";
					return false;
				}
				let session_hash = data.session_hash;
				data.model = "sai_xl_canny_256lora [566f20af]";
				data.keyvalue =  "ControlNet_Canny";
				data.cpu =  "canny";
				data.weight =  0.8;
				data.number1 =  100;
				data.number2 =  200;
				data.number3 =  0;
				data.number4 =  1;
				data.imageBase64 = this.inputBase64Url;
				
				let res2 = await requestConfig("AIuploadImgControlNet", data);
				if(!res2 || !res2.success){
					this.showToast("渲染失败，请重试");
					this.aiFlag = false;
					this.aiImage = "";
					return false;
				}
				data.model = "t2iadapter_seg_sd14v1 [6387afb5]";
				data.keyvalue =  "ControlNet_Seg";
				data.cpu =  "seg_ofade20k";
				data.weight =  0.8;
				data.number1 =  -1;
				data.number2 =  -1;
				data.number3 =  0;
				data.number4 =  1;
				data.imageBase64 = this.inputBase64Url;
				let res3 = await requestConfig("AIuploadImgControlNet", data);
				if(!res3 || !res3.success){
					this.showToast("渲染失败，请重试");
					this.aiFlag = false;
					this.aiImage = "";
					return false;
				}
				
				const prompt = this.styleList[this.curStyleIndex].prompt;
				const noPromot = this.styleList[this.curStyleIndex].negativePrompt;
				let unit = 768 / window.screen.width;
				this.imageWidth = parseInt((window.screen.width * unit).toFixed());
				this.imageHeight = parseInt((this.$parent.canvasHeight * unit).toFixed());
				// this.$parent.canvasHeight = window.screen.height - (208 * unit);
				var parmas = {
					negativePrompt: noPromot,
					prompt: prompt,
					"batchSize": 1,
					brandId: $config.brandId,
					height: this.imageHeight,
					width: this.imageWidth,
					"moduleType": "AI_Biography",
					"keyword":"img_2_img",
					"steps":20,
					"sampler":"DDIM",
					"controlNetSessionHash":session_hash,
					"cfgScale":12,
					"denoising":0.9
				};
				let res = await requestConfig("generateTaskImgToImgForAliyun", parmas);
				console.log("图生图结果：", res);
				if(this.$parent.pvCurPageName!="room_show"){//说明用户切换页面了
					console.warn("***用户已经退出页面***")
					return false;
				}
				let that = this;
				if (res.success && res.single) {
					if(typeof(res.single)=="object"){
						let cot = res.single.queueCount || 1;
						this.showToast("正有"+cot+"人排队，预计等待"+cot*25+"秒");
						this.aiImage = "";
						this.aiFlag = false;
						this.clearInterval();
						return false;
					}
					this.taskId = res.single;
					if (!this.img2imgTimer) {
						this.count = 0;
						this.random = 1;
						this.img2imgTimer = setInterval(() => {
							this.count ++;
							this.getResultForImgToImg();
						}, 1000);
					}
				}else{
					this.aiFlag = false;
					this.aiImage = "";
					this.showToast("渲染失败，请重试")
				}
			},
			// 轮询获取图片结果
			async getResultForImgToImg() {
				var parmas = {
					id: this.taskId,
				};
				let res = await requestConfig("generateProcess", parmas);
				// let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
				// console.warn("图生图轮询结果：", res);
				if (res.success && res.single) {
					if (res.single.inQueue == false) {
						if (res.single.urls) {
							// uni.hideLoading();
							this.aiFlag = false;
							this.random = 100;
							console.warn("图生图轮询结束: ", res);
							this.aiImage = res.single.urls[0];
							this.showAIFlag = true;
							let newImage = this.aiImage;
							let aiStyleName = this.styleList[this.curStyleIndex].styleName;
							let _data = {
								image:newImage,
								checked:false,
								list:[newImage],
							}
							this.aiImagesList.push(_data);
							this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
							if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
								this.$parent.clearHandle();
							}
							let cpAiData = JSON.parse(JSON.stringify(this.aiData)) || []
							if(cpAiData){//给上一个页面回传生成的数据
								let space = cpAiData.find(it=>{
									return it.houseFloor == this.curHouseObj.houseFloor && it.spaceId == this.spaceObj.spaceId
								})
								if(space){
									let data ={
										aiStyleName:aiStyleName,
										image:newImage,
										checked:false,
									}
									space.aiImagesList.push(data);
								}else{//不存在则构建数据
									let data = {
										houseFloor:this.curHouseObj.houseFloor,//当前的楼层
										spaceId:this.spaceObj.spaceId,
										aiImagesList:[
											{
												aiStyleName:aiStyleName,
												image:newImage,
												checked:false,
											}
										]
									}
									cpAiData.push(data)
								}
								this.$store.dispatch('setAiData', cpAiData)
							}
							this.clearInterval();
							if(this.aiImagesList.length>1){
								setTimeout(()=>{
									this.$refs.carousel.next();
								}, 1000);
							}
						} else {
							if (!res.success) {
								this.showToast("渲染失败，请重试")
								this.aiFlag = false;
								this.aiImage = "";
								this.clearInterval();
							}else {
								this.random = parseInt(this.count * 2);
								if(this.random>=100){
									this.random = 99;
								}
								if(!this.showAIImage){
									// this.$store.state.loadingMsg='生成中…' + this.random + '%';
									this.loadingMsg = '生成中…' + this.random + '%';
								}else{
								}
							}
						}
					} else {
						let cot = res.single.queueCount || 1;
						this.showToast("正有"+cot+"人排队，预计等待"+cot*25+"秒");
						this.aiImage = "";
						this.aiFlag = false;
						this.clearInterval();
					}
				}
			},
			showToast(title){
				this.$store.state.loading = true;
				this.$store.state.loadingMsg = title || "";
				setTimeout(()=>{
					this.$store.state.loading = false;
				}, 3000);
			}
		}
	}
</script>
<style lang="scss" scoped>
    @import "./viewMask.scss";
</style>
<style lang="css" scoped>
	/* @import "@/common/css/common.css"; */
</style>