qiushang 1 năm trước cách đây
mục cha
commit
d257e3bfda
3 tập tin đã thay đổi với 111 bổ sung61 xóa
  1. 2 2
      package.json
  2. 1 1
      src/renderer/assets/css/home.scss
  3. 108 58
      src/renderer/components/home.vue

+ 2 - 2
package.json

@@ -8,11 +8,11 @@
 	"softInfo": {
 		"description": "这里是软件描述文档",
 		"downloadName": "XYImage",
-		"softMid": "Lfk5KXGSo9wC",
+		"softMid": "zw6yxe4noPx3",
 		"softName": "图片处理器",
 		"copyright": "苏州星优办公软件有限公司",
 		"popupAdvId": "8",
-		"linkId": "15",
+		"linkId": "3",
 		"upgradeLog": "1、修复了部分BUG</br>",
 		"downloadPrefix": "https://xy.xingyousoft.com/soft",
 		"statisticsUrl": "https://www.xingyousoft.com/api/index/user_log"

+ 1 - 1
src/renderer/assets/css/home.scss

@@ -874,7 +874,7 @@ div,p{
 	}
 	
 	.el-radio{
-		margin: 10px 20px 10px 0 !important;
+		margin: 8px 20px 8px 0 !important;
 	}
 }
 

+ 108 - 58
src/renderer/components/home.vue

@@ -152,8 +152,8 @@
 													</vxe-table>
 												</div>
 												<div class="merge-content" v-if="menuIndex == 10">
-													<div v-if="cropOptions.imgInfo.width" style="text-align: right; color: #999; margin-bottom: 10px;">
-														原图尺寸{{cropOptions.imgInfo.width}}*{{cropOptions.imgInfo.height}}
+													<div v-if="cropOptionsImgInfo.width" style="text-align: right; color: #999; margin-bottom: 10px;">
+														原图尺寸{{cropOptionsImgInfo.width}}*{{cropOptionsImgInfo.height}}
 														<span style="margin-left: 30px;">缩放比例{{cropOptions.cropScale.toFixed(1)}}%</span>
 														<el-button style="margin-left: 30px;" type="primary" plain @click="previewImg" icon="el-icon-view">预览</el-button>
 													</div>
@@ -295,22 +295,19 @@
 															</div>
 															<div class="handle-item">
 																<label class="handle-label">文字字体:</label>
-																<el-select size="small" v-model="handleData.fonts" style="width:140px;" @change="handleImg">
+																<el-select size="small" v-model="handleData.fonts" style="width:120px;" @change="handleImg">
 																	<el-option v-for="(item,key) in fonts" :key="key" :value="item.path" :label="item.name"></el-option>
 																</el-select>
 																<vxe-button type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message({message:'文字为中文时,请选择中文字体!', type:'warning'})"></vxe-button>
 															</div>
 															<template v-if="handleData.watermarkStyle == 2">
 																<div class="handle-item" style="overflow: hidden;" v-if="handleData.watermarkType != '0'">
-																	<label class="handle-label">水印密度:</label>
-																	<div class="line-density">
-																		<label class="density-label">行数</label>
-																		<el-input-number size="small" style="width: 60px;margin-right: 4px;" :min="1" v-model="handleData.watermarkDensityY" @change="handleImg" ></el-input-number>
-																		<div style="margin-top: 3px;">
-																			<label class="density-label">列数</label>
-																			<el-input-number size="small" style="width: 60px;" :min="1" v-model="handleData.watermarkDensityX" @change="handleImg" ></el-input-number>
-																		</div>
-																	</div>
+																	<label class="handle-label">水印行数:</label>
+																	<el-input-number size="small" :min="1" v-model="handleData.watermarkDensityY" @change="handleImg" ></el-input-number>
+																</div>
+																<div class="handle-item" style="overflow: hidden;" v-if="handleData.watermarkType != '0'">
+																	<label class="handle-label">水印列数:</label>
+																	<el-input-number size="small" :min="1" v-model="handleData.watermarkDensityX" @change="handleImg" ></el-input-number>
 																</div>
 															</template>
 														</div>
@@ -485,10 +482,10 @@
 																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '750:500' ? 'primary' : 'default'" @click="fixedChange('750:500')">
 																	首页横幅 750x500
 																</el-button>
-																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '740x352' ? 'primary' : 'default'" @click="fixedChange('740x352')">
+																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '740x352' ? 'primary' : 'default'" @click="fixedChange('740:352')">
 																	商品主图 740x352
 																</el-button>
-																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '640x320' ? 'primary' : 'default'" @click="fixedChange('640x320')">
+																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '640x320' ? 'primary' : 'default'" @click="fixedChange('640:320')">
 																	手机详情页 640x320
 																</el-button>
 															</div>
@@ -505,7 +502,7 @@
 																<div class="handle-item">
 																	<label class="handle-label">锁定比例:</label>
 																	<el-checkbox v-model="cropOptions.fixed"></el-checkbox>
-																	<span style="font-size: 12px; color: #666;">(原始尺寸{{cropOptions.imgInfo.originalWidth}}:{{cropOptions.imgInfo.originalHeight}})</span>
+																	<span style="font-size: 12px; color: #666;">(原始尺寸{{cropOptionsImgInfo.originalWidth}}:{{cropOptionsImgInfo.originalHeight}})</span>
 																</div>
 															</template>
 															
@@ -802,10 +799,9 @@ export default {
 			cropImgLoading: false,
 			virtualWidth: 0,
 			virtualHeight: 0,
-			cropHeight: 0,
+			cropOptionsImgInfo: {},
 			cropOptions: {
 				img: '',
-				imgInfo: {},
 				autoCrop: true, // 是否默认生成截图框
 				autoCropWidth: 100,
 				autoCropHeight: 100,
@@ -1000,14 +996,14 @@ export default {
 		this.defaultFont = 'c:\\windows\\fonts\\simkai.ttf';
 
         // 打开浏览器
-        const links = document.querySelectorAll('a[href]');
-        links.forEach(link => {
-            link.addEventListener('click', e => {
-                const url = link.getAttribute('href');
-                e.preventDefault();
-                electronApi.call('openExternal', [url]);
-            });
-        });
+		const links = document.querySelectorAll('a[href]');
+		links.forEach(link => {
+			link.addEventListener('click', e => {
+				const url = link.getAttribute('href');
+				e.preventDefault();
+				electronApi.call('openExternal', [url]);
+			});
+		});
 		
 		this.initDrop();
     },
@@ -1041,7 +1037,7 @@ export default {
 			});
 			this.cropOptions.fixedValue = 'free';
 			this.cropOptions.fixed = false;
-			this.cropOptions.fixedNumber = [this.cropOptions.imgInfo.width, this.cropOptions.imgInfo.height];
+			this.cropOptions.fixedNumber = [this.cropOptionsImgInfo.width, this.cropOptionsImgInfo.height];
 			setTimeout(()=>{
 				this.resetModal = false;
 			}, 500);
@@ -1053,16 +1049,18 @@ export default {
 				this.cropOptions.fixed = false;
 			}else if(e == 'original'){
 				this.cropOptions.fixed = true;
-				this.cropOptions.fixedNumber = [this.cropOptions.imgInfo.width, this.cropOptions.imgInfo.height];
+				this.cropOptions.fixedNumber = [this.cropOptionsImgInfo.originalWidth, this.cropOptionsImgInfo.originalHeight];
 			}else{
 				this.cropOptions.fixed = true;
 				this.cropOptions.fixedNumber = [e.split(':')[0], e.split(':')[1]];
 			}
-			this.$refs.cropper.goAutoCrop();
-			this.$nextTick(() => {
-				this.cropOptions.autoCropWidth = Number(this.$refs.cropper.cropW.toFixed(0));
-				this.cropOptions.autoCropHeight = Number(this.$refs.cropper.cropH.toFixed(0));
-			});
+			setTimeout(() => {
+				this.$refs.cropper.goAutoCrop();
+				this.$nextTick(() => {
+					this.cropOptions.autoCropWidth = Number(this.$refs.cropper.cropW.toFixed(0));
+					this.cropOptions.autoCropHeight = Number(this.$refs.cropper.cropH.toFixed(0));
+				});
+			}, 100);
 		},
 		// 加载图片成功回调函数
 		cropImgLoad(result){
@@ -1099,6 +1097,11 @@ export default {
 			}
 		},
 		getCropInfo(data){
+			if(this.cropOptions.cropType == '2' && this.cropOptions.cropClassify != '1'){
+				document.getElementsByClassName('crop-info')[0].style.opacity = 0;
+			}else{
+				document.getElementsByClassName('crop-info')[0].style.opacity = 1;
+			}
 			setTimeout(() => {
 				this.cropOptions.previewInfo = data.html;
 				let w = document.getElementsByClassName('crop-info')[0].innerText.split(' × ')[0];
@@ -1127,7 +1130,7 @@ export default {
 				this.virtualHeight = Number(h);
 				
 				this.cropList[this.cropImgIndex].cropPosition = cropPosition;
-				this.cropList[this.cropImgIndex].cropOptions = this.cropOptions;
+				this.cropList[this.cropImgIndex].cropOptions = JSON.parse(JSON.stringify(this.cropOptions));
 			}, 200);
 			
 		},
@@ -1137,12 +1140,32 @@ export default {
 		// 选择图片
 		selectCropImg(index){
 			this.cropImgIndex = index;
+			if(this.cropList[index].cropOptions){
+				this.cropOptions = JSON.parse(JSON.stringify(this.cropList[index].cropOptions));
+			}else{
+				this.setDefaultCropData();
+			}
 			this.cropOptions.img = this.cropList[index].path;
-			this.cropOptions.imgInfo = this.cropList[index];
+			this.cropOptionsImgInfo = this.cropList[index];
 			this.cropImgLoading = false;
+			this.$forceUpdate();
+		},
+		// 裁剪分类
+		classifyChange(e){
+			if(e == '1'){ // 自定义
+				this.virtualWidth = this.cropOptionsImgInfo.originalWidth;
+				this.virtualHeight = this.cropOptionsImgInfo.originalHeight;
+				this.cropOptions.fixed = false;
+				this.cropOptions.fixedValue = 'free';
+				this.$refs.cropper.goAutoCrop();
+				this.$nextTick(() => {
+					this.cropOptions.autoCropWidth = Number(this.virtualWidth);
+					this.cropOptions.autoCropHeight = Number(this.virtualHeight);
+				});
+			}
 		},
 		cropWidthChange(e){
-			let scale = Number(this.cropOptions.imgInfo.originalWidth) / Number(this.cropOptions.imgInfo.originalHeight);
+			let scale = Number(this.cropOptionsImgInfo.originalWidth) / Number(this.cropOptionsImgInfo.originalHeight);
 			if(this.cropOptions.fixed){ // 锁定比例
 				this.virtualHeight = Math.round(this.virtualWidth / scale);
 			}
@@ -1162,7 +1185,7 @@ export default {
 			
 		},
 		cropHeightChange(e){
-			let scale = Number(this.cropOptions.imgInfo.originalWidth) / Number(this.cropOptions.imgInfo.originalHeight);
+			let scale = Number(this.cropOptionsImgInfo.originalWidth) / Number(this.cropOptionsImgInfo.originalHeight);
 			if(this.cropOptions.fixed){ // 锁定比例
 				this.virtualWidth = Math.round(this.virtualHeight * scale);
 			}
@@ -1211,10 +1234,19 @@ export default {
 				}else{
 					str = item.width + 'x' + item.height + '+' + 0 + '+' + 0;
 				}
+				
+				let resize = [];
+				if(item.cropOptions && item.cropOptions.cropType == '2' && item.cropOptions.cropClassify != '1'){
+					let oWidth = item.cropOptions.fixedNumber[0];
+					let oHeight = item.cropOptions.fixedNumber[1];
+					resize = ['-resize', `${Number(oWidth)}x${Number(oHeight)}!`,];
+				}
+				
 				let params = [
 					'convert.exe',
 					'-crop',
 					str,
+					...resize,
 					item.path,
 					newPath
 				];	
@@ -1307,6 +1339,8 @@ export default {
 			}else{
 				this.cropList = [];
 				this.cropImgIndex = -1;
+				this.setDefaultCropData();
+				this.cropOptionsImgInfo = {};
 			}
         },
 		setMenuIndex(index){
@@ -1325,6 +1359,28 @@ export default {
 				this.setDefaultImgInfo(this.imgList[0]);
 			}
 		},
+		setDefaultCropData(){
+			this.cropOptions = {
+				img: '',
+				autoCrop: true, // 是否默认生成截图框
+				autoCropWidth: 100,
+				autoCropHeight: 100,
+				cropWidth: 100,
+				cropHeight: 100,
+				original: false,
+				maxImgSize: 20000,
+				canMove: false,
+				centerBox: true, // 截图框是否被限制在图片里面
+				fixed: false, //是否开启截图框宽高固定比例
+				fixedValue: 'free',
+				cropType: '1',
+				cropClassify: '1',
+				fixedNumber: [1, 1],
+				infoTrue: true,
+				previewInfo: '',
+				cropScale: 100,
+			};
+		},
 		setDefaultData(){
 			this.handleData = {
 				dpi: 300,
@@ -2294,6 +2350,9 @@ export default {
 						];
 						await electronApi.spawnExec(params2,{stderr:(data) => { imgInfo.percent=60;this.imgList.splice(index,1,imgInfo);}}).then(async (res2) => {
 							await this.waterComposite(index, imgInfo, newPath, tmpPath2);
+							if(fs.existsSync(tmpPath)){
+								fs.unlinkSync(tmpPath);
+							}
 						})
 					}else{
 						await this.waterComposite(index, imgInfo, newPath, tmpPath);
@@ -2358,6 +2417,9 @@ export default {
 						];
 						await electronApi.spawnExec(params2,{stderr:(data) => { imgInfo.percent=60;this.imgList.splice(index,1,imgInfo);}}).then(async (res2) => {
 							await this.waterComposite(index, imgInfo, newPath, tmpPath2);
+							if(fs.existsSync(tmpPath)){
+								fs.unlinkSync(tmpPath);
+							}
 						})
 					}else{
 						await this.waterComposite(index, imgInfo, newPath, tmpPath);
@@ -2433,6 +2495,9 @@ export default {
 					if(this.imgList[index]){
 						imgInfo.percent =  100;
 						this.imgList.splice(index, 1, imgInfo);
+						if(fs.existsSync(waterImg)){
+							fs.unlinkSync(waterImg);
+						}
 					}else{
 						reject({type:this.menuIndex,index,err:'用户强制终止!'});
 					}
@@ -2460,7 +2525,7 @@ export default {
 					fontSize = 100;
 				}
 
-				let sysDefaultTmpPath = os.tmpdir()+separator+'water_sys_'+fontSize+'.png';
+				let sysDefaultTmpPath = os.tmpdir()+separator+'water_xy_'+fontSize+'.png';
 
 				let params = [
 					'convert.exe',
@@ -2468,7 +2533,7 @@ export default {
 					'-background',
 					'none',
 					'-fill',
-					'red',
+					'rgba(0,0,0,0.8)',
 					'-font',
 					this.defaultFont,
 					'-pointsize',
@@ -2523,10 +2588,10 @@ export default {
 			})
         },
 		deleteSysWtater(){
-			let w1 = os.tmpdir()+separator+'water_sys_16.png';
-			let w2 = os.tmpdir()+separator+'water_sys_28.png';
-			let w3 = os.tmpdir()+separator+'water_sys_40.png';
-			let w4 = os.tmpdir()+separator+'water_sys_100.png';
+			let w1 = os.tmpdir()+separator+'water_xy_16.png';
+			let w2 = os.tmpdir()+separator+'water_xy_28.png';
+			let w3 = os.tmpdir()+separator+'water_xy_40.png';
+			let w4 = os.tmpdir()+separator+'water_xy_100.png';
 
 			if(fs.existsSync(w1)){
 				fs.unlinkSync(w1);
@@ -2709,7 +2774,7 @@ export default {
 					if(this.cropList.length > 0){
 						this.cropImgIndex = 0;
 						this.cropOptions.img = this.cropList[0].path;
-						this.cropOptions.imgInfo = this.cropList[0];
+						this.cropOptionsImgInfo = this.cropList[0];
 						this.cropImgLoading = false;
 					}
 					
@@ -2879,21 +2944,6 @@ export default {
 			this.sizeChange();
 		},
 		
-		// 裁剪分类
-		classifyChange(e){
-			if(e == '1'){ // 自定义
-				this.virtualWidth = this.cropOptions.imgInfo.originalWidth;
-				this.virtualHeight = this.cropOptions.imgInfo.originalHeight;
-				this.cropOptions.fixed = false;
-				this.cropOptions.fixedValue = 'free';
-				this.$refs.cropper.goAutoCrop();
-				this.$nextTick(() => {
-					this.cropOptions.autoCropWidth = Number(this.virtualWidth);
-					this.cropOptions.autoCropHeight = Number(this.virtualHeight);
-				});
-			}
-		},
-		
 		// 缩放
 		zoom(flag){
 			if(flag == 'reduce'){ // 缩小