add

src/renderer/components/home.vue

@@ -179,7 +179,7 @@
 														 :data="imgList" @cell-click="selectTab">
 														<vxe-column field="name" width="123" show-overflow>
 															<template #default="{ row, rowIndex }">
-																<vxe-button type="text" icon="vxe-icon-close" class="vxebtn-del" @click="delImgFile(rowIndex)"></vxe-button>
+																<i class="el-icon-close vxebtn-del" style="font-size: 18px;" @click.stop="delImgFile(rowIndex)"></i>
 																<el-image style="width: 60px; height: 60px" :src="row.path" fit="contain" :title="row.name"></el-image>
 																<div class="img-mid-progress" v-if="row.percent > 0">
 																	<el-progress :percentage="row.percent"></el-progress>
@@ -224,7 +224,7 @@
 													<div style="width: 100%; height: 100%;">
 														<div id="show-img" class="show-img" style="position:relative;overflow: hidden; width: 100%; height: 100%;">
 															<template v-if="menuIndex != 12">
-																<div style="position: absolute;top: 5px; left: 5px;padding: 0 10px 10px 10px; background: #00000060; color: #fff;font-size: 12px;z-index: 2;">
+																<div style="position: absolute;width:190px;height:38px;top: 5px; left: 5px;padding: 0 10px 10px 10px; background: #00000060; color: #fff;font-size: 12px;z-index: 2;">
 																	<label>放大：</label>
 																	<el-slider v-model="viewScale" class="info-input" :min="0.5" :max="5" :step="0.1"></el-slider> 
 																	{{viewScale.toFixed(1)}}
@@ -627,7 +627,7 @@
 														<!-- 多个水印 -->
 														<template>
 															<div v-for="(item, index) in watermarkImgList" :key="index">
-																<div class="handle-title">第{{index+2}}张叠加图<el-button type="danger" size="mini" @click="delWatermark(index)">删除</el-button></div>
+																<div class="handle-title">第{{index+2}}张叠加图<el-button style="padding: 4px 8px; margin-left: 5px;" type="danger" size="mini" @click="delWatermark(index)">删除</el-button></div>
 																<div class="handle-item" @click="waterMoreIndex = index">
 																	<label class="handle-label">选择图片：</label>
 																	<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPathMore">
@@ -665,7 +665,7 @@
 															</div>
 															
 															<div style="text-align: center; margin: 10px 0;">
-																<el-button @click="moreImgWater()">添加一张叠加图</el-button>
+																<el-button @click="moreImgWater()" type="primary">添加一张叠加图</el-button>
 															</div>
 														</template>
 														
@@ -1624,7 +1624,7 @@ export default {
 				this.setDefaultImgInfo(this.imgList[0]);
 			}
 			
-			if([3,4,5,6,9].indexOf(this.menuIndex) == -1){ // 滚动事件
+			if([3,4,5,6,9,13].indexOf(this.menuIndex) == -1){ // 滚动事件
 				this.rollFlag = false;
 			}
 			
@@ -1699,7 +1699,9 @@ export default {
 				hflip: false,
 				vflip: false,
 				lockScale: true,
-            };
+			};
+			this.watermarkImgList = []; // 叠加图水印
+			this.waterMoreIndex = -1;
 		},
         // 选择水印图片
         getImgPath(e) {
@@ -1844,7 +1846,7 @@ export default {
 				})
 			}
 			
-			if([3,4,5,6,9].indexOf(this.menuIndex) > -1){ // 绑定滚动事件
+			if([3,4,5,6,9,13].indexOf(this.menuIndex) > -1){ // 绑定滚动事件
 				setTimeout(() => {
 					if(!this.rollFlag){
 						this.initRoll();
@@ -2024,7 +2026,8 @@ export default {
 						this.imgLoading = false;
 						break;
 					}else{
-						task = this.imgWatermark(index, imgInfo, newPath,!img);
+						//task = this.imgWatermark(index, imgInfo, newPath,!img);
+						task = this.imgWatermarkOver(index, imgInfo, newPath,!img);
 					}
 					break;
 				case 12: //图片分割
@@ -3074,7 +3077,7 @@ export default {
 			}
 		},
 		
-		// 删除重命名文件
+		// 删除文件
 		delImgFile(rowIndex){
 			this.$confirm('确认删除这张图片吗?', '提示', {
 				confirmButtonText: '确定',
@@ -3884,7 +3887,7 @@ export default {
 				watermarkImgOpactiy: 100, // 水印不透明度
 				scaling: 100, // 水印缩放比例
 				watermarkPosition: 'Center', // 水印位置
-				rotate: 30
+				rotate: 0
 			};
 			this.watermarkImgList.push(waterInfo);
 		},
@@ -3904,7 +3907,150 @@ export default {
 			    this.handleImg();
 			}
 		},
-		
+		// 叠加图片水印
+		async imgWatermarkOver(index, imgInfo, newPath,isPreview=false) {
+			return new Promise(async(resolve,reject) => {
+				let tmpPath = os.tmpdir()+separator+'water_img_'+Math.random()+'.png';
+				let params1 = [
+					'convert.exe',
+					'-monitor',
+					'-background',
+					'none',
+					'-resize',
+					`${Number(this.handleData.watermarkImgSize)}%`,
+					'-alpha', 'set', '-channel', 'A', '-evaluate', 'Multiply', this.handleData.watermarkImgOpactiy/100, '+channel', // 透明度
+					'-rotate',
+					this.handleData.watermarkImgRotate ? this.handleData.watermarkImgRotate : 0,
+					'-gravity', 
+					'center',
+					'-extent',
+					'100%',
+					this.handleData.watermarkImgPath,
+					tmpPath
+				];
+				
+				await electronApi.spawnExec(params1).then(async (res) => {});
+				
+				let waterParams = [];
+				if(this.watermarkImgList.length > 0){
+					for(let iw = 0; iw < this.watermarkImgList.length; iw ++){
+						let witem = this.watermarkImgList[iw];
+						if(witem.watermarkImgPath){
+							witem['tmpPath'] = os.tmpdir()+separator+'water_imgover_'+iw+'.png';
+							let params = [
+								'convert.exe',
+								'-monitor',
+								'-background',
+								'none',
+								'-resize',
+								`${Number(witem.scaling)}%`,
+								'-alpha', 'set', '-channel', 'A', '-evaluate', 'Multiply', witem.watermarkImgOpactiy/100, '+channel', // 透明度
+								'-rotate',
+								witem.rotate ? witem.rotate : 0,
+								'-gravity', 
+								'center',
+								'-extent',
+								'100%',
+								witem.watermarkImgPath,
+								witem['tmpPath']
+							];
+							
+							await electronApi.spawnExec(params).then(async (res) => {
+								let arr = [
+									witem['tmpPath'],
+									'-gravity',
+									witem.watermarkPosition,
+									'-geometry',
+									'+' + witem.watermarkX + '+' + witem.watermarkY,
+									'-composite'
+								];
+								waterParams = waterParams.concat(arr);
+							});
+						}
+					}
+				}
+				
+				let params2 = [
+					'convert.exe',
+					'-monitor',
+					imgInfo.path,
+					tmpPath,
+					'-gravity',
+					this.handleData.watermarkPosition,
+					'-geometry',
+					'+' + this.handleData.watermarkX + '+' + this.handleData.watermarkY,
+					'-composite',
+					...waterParams,
+					newPath
+				];
+				
+				await electronApi.spawnExec(params2,{
+					stderr:(data) => {
+						let percent = 0;
+						let str = data.toString();
+						const regexDuration = /Load.*?,(.*?)%/;
+						const regexDuration2 = /Save.*?,(.*?)%/;
+						
+						const res = regexDuration.exec(str);
+						const res2 = regexDuration2.exec(str);
+				
+						let p1 = 0;
+						let p2 = 0;
+						if(res && res[1]){
+							p1 = parseInt(res[1]);
+							if(p1 > 0){
+								imgInfo.percent =  Math.round(p1/2);
+							}
+						}else{
+							if(res2 && res2[1]){
+								p2 = parseInt(res2[1]);
+							}
+							if(p2 > 0){
+								imgInfo.percent =  Math.round(50+(p2/2));
+							}
+						}
+						
+						if(this.handleData.watermarkStyle == 2){ // 平铺
+							imgInfo.percent = 60 + Math.round(percent*0.4);
+						}else{
+							imgInfo.percent = percent;
+						}
+				
+						if(this.imgList[index]){
+							this.imgList.splice(index,1,imgInfo);
+						}
+					},
+				}).then(res2 => {
+					setTimeout(() => {
+						if(this.imgList[index]){
+							imgInfo.percent =  100;
+							this.imgList.splice(index, 1, imgInfo);
+							if(fs.existsSync(tmpPath)){
+								fs.unlinkSync(tmpPath);
+							}
+						}else{
+							reject({type:this.menuIndex,index,err:'用户强制终止！'});
+						}
+					}, 150);
+				
+					//未购买 添加系统水印
+					this.addWatermark(index,{...imgInfo,path:newPath},newPath);
+					
+					if(isPreview){ // 预览状态
+						electronApi.fileStream(newPath).then(buffer => {
+							this.imgSrc = "data:image/png;base64,"+buffer.toString('base64');
+							this.imgLoading = false;
+						}).catch(err => {
+							this.imgLoading = false;
+						})
+					}
+					resolve({type:this.menuIndex, index:index, info:imgInfo});
+				}).catch(err => {
+					reject({type:this.menuIndex, index:index, err: err});
+				});
+				
+			});
+		},
 		
 		
     }
@@ -4242,6 +4388,7 @@ export default {
 		top: 10px;
 		color: #F56C6C !important;
 		z-index: 2;
+		cursor: pointer;
 	}
 	
 	.m-image{