qiushang 1 vuosi sitten
vanhempi
commit
bf3f12f1d9
2 muutettua tiedostoa jossa 113 lisäystä ja 35 poistoa
  1. 2 2
      src/renderer/assets/css/home.scss
  2. 111 33
      src/renderer/components/home.vue

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

@@ -153,8 +153,8 @@ div,p{
 }
 
 .result-img {
-  max-width: 298px;
-  max-height: 200px;
+  // max-width: 298px;
+  // max-height: 200px;
   align-items: center;
   margin: auto;
 }

+ 111 - 33
src/renderer/components/home.vue

@@ -82,8 +82,8 @@
 								<!-- 1、格式转换 2、图片压缩 3、修改dpi-->
 								<template v-if="menuIndex == 1 || menuIndex == 2 || menuIndex == 11">
 									<div style="height: calc(100% - 78px);">
-										<vxe-table ref="xTable" show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了!" :row-config="{isHover: true}"
-											:edit-config="{trigger: 'click', mode: 'cell'}" :data="imgList" :scroll-y="{enabled: true}" @cell-click="selectTab">
+										<vxe-table ref="xTable" show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了!" :row-config="{isCurrent: true, isHover: true}"
+											:edit-config="{trigger: 'click', mode: 'cell'}" :data="imgList" :scroll-y="{enabled: true}">
 											<vxe-column field="name" :title="'文件名'+'(' + imgList.length + ')'" min-width="120"></vxe-column>
 											<vxe-column field="path" title="缩略图" width="70">
 												<template #default="{ row }">
@@ -183,9 +183,14 @@
 												</div>
 												<div class="merge-content" v-else>
 													<div style="width: 100%; height: 100%;">
-														<div class="show-img" style="position:relative;overflow: hidden; width: 100%; height: 100%;">
-															<img draggable="false" class="result-img" :src="imgSrc" 
-															:style="{borderRadius: menuIndex == 6 ? handleData.circularValue+'%' : 0, maxWidth: '80%',maxHeight: '500px', transform: 'rotate('+handleData.rotateValue+'deg) rotateY('+ (handleData.hflip ? '180' : '0') +'deg) rotateX('+ (handleData.vflip ? '180' : '0') +'deg) scale('+ handleData.scaling/100+')'}" />
+														<div id="show-img" class="show-img" style="position:relative;overflow: hidden; width: 100%; height: 100%;">
+															<div style="position: absolute;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="1" :max="5" :step="0.1"></el-slider> 
+																{{viewScale.toFixed(1)}}
+															</div>
+															<img draggable="false" class="result-img" :src="imgSrc"
+															:style="{borderRadius: menuIndex == 6 ? handleData.circularValue+'%' : 0, maxWidth: '80%',maxHeight: '500px', transform: 'rotate('+handleData.rotateValue+'deg) rotateY('+ (handleData.hflip ? '180' : '0') +'deg) rotateX('+ (handleData.vflip ? '180' : '0') +'deg) scale('+viewScale+')'}" />
 														</div>
 													</div>
 												</div>
@@ -224,16 +229,22 @@
 													<!-- 4美化图片 -->
 													<div v-if="menuIndex == 4">
 														<div class="handle-item">
-															<label class="handle-label">颜色:</label>
+															<label class="handle-label">滤镜:</label>
 															<el-select size="small" v-model="handleData.color" style="width:100px;" @change="handleImg">
 																<el-option value="0" label="原图"></el-option>
-																<!-- <el-option value="1" label="低彩"></el-option> -->
+																<el-option value="1" label="黑白"></el-option>
 																<el-option value="2" label="灰度"></el-option>
 																<el-option value="3" label="反转"></el-option>
+																<!-- <el-option value="4" label="油画"></el-option> -->
 															</el-select>
 														</div>
+														<!-- <div class="handle-item">
+															<label class="handle-label">油画半径:</label>
+															<el-slider v-model="handleData.paintValue" class="info-input" @change="handleImg" :min="1" :max="100"></el-slider> 
+															{{handleData.paintValue}}
+														</div> -->
 														<div class="handle-item">
-															<label class="handle-label">颜色量:</label>
+															<label class="handle-label">色彩数:</label>
 															<el-slider v-model="handleData.colorValue" class="info-input" @change="handleImg" :min="1" :max="256"></el-slider> 
 															{{handleData.colorValue}}
 														</div>
@@ -248,6 +259,16 @@
 															{{handleData.brightnessValue}}
 														</div>
 														<div class="handle-item">
+															<label class="handle-label">饱和度:</label>
+															<el-slider v-model="handleData.saturationValue" class="info-input" :min="-100" :max="100" @change="handleImg"></el-slider> 
+															{{handleData.saturationValue}}
+														</div>
+														<div class="handle-item">
+															<label class="handle-label">色调:</label>
+															<el-slider v-model="handleData.hueValue" class="info-input" :min="-100" :max="100" @change="handleImg"></el-slider> 
+															{{handleData.hueValue}}
+														</div>
+														<div class="handle-item">
 															<label class="handle-label">透明度:</label>
 															<el-slider v-model="handleData.opacityValue" class="info-input" @change="handleImg"></el-slider> 
 															{{handleData.opacityValue}}
@@ -295,7 +316,7 @@
 															<div class="handle-item">
 																<label class="handle-label">文字样式:</label>
 																<el-color-picker style="vertical-align: middle;" v-model="handleData.watermarkColor" show-alpha @change="handleImg"></el-color-picker>
-																<el-input-number size="small" style="width: 100px;" v-model="handleData.watermarkFont" @change="handleImg" :min="0" :max="200"></el-input-number>
+																<el-input-number size="small" style="width: 105px;" v-model="handleData.watermarkFont" @change="handleImg" :min="0" :max="200"></el-input-number>
 															</div>
 															<div class="handle-item">
 																<label class="handle-label">旋转角度:</label>
@@ -797,6 +818,8 @@ export default {
     },
     data() {
         return {
+			rollFlag: false,
+			viewScale: 1,
 			productName: pjson.softInfo.softName,
 			setModal: false,
 			resetModal: false,
@@ -829,7 +852,7 @@ export default {
 				cropScale: 100,
 			},
 			execLimit: 3,
-			defaultFont:'',
+			defaultFont:'c:\\windows\\fonts\\simkai.ttf',
 			imgShow:false,
 			pickProgress:false,
 			pickProgressPercent:0,
@@ -880,11 +903,14 @@ export default {
                 quality: 92, // 图片品质
 				colorNum:256, // 颜色数量 1 - 256
                 sizeType: '1', // 调整尺寸
-                scaling: 90, // 缩放比例
+                scaling: 100, // 缩放比例
                 rotateValue: 0, // 旋转角度
                 color: '0', // 图片色彩
 				colorValue: 256,
+				paintValue: 1, //油画数值
                 brightnessValue: 0, // 亮度
+				saturationValue: 0, //饱和度
+				hueValue: 0, // 色调
                 contrastValue: 0, // 对比度
                 opacityValue: 100, // 透明度
 				compressScaling:100,
@@ -1013,10 +1039,31 @@ export default {
 				electronApi.call('openExternal', [url]);
 			});
 		});
-		
 		this.initDrop();
     },
     methods: {
+		// 鼠标滚轮事件
+		initRoll(){
+			let element = document.getElementById('show-img');
+			if(!this.rollFlag){
+				// 添加滚轮事件监听器
+				element.addEventListener('wheel', (event) => {
+					this.rollFlag = true;
+					// event.deltaY 是滚轮滚动的距离,正值表示向下滚动,负值表示向上滚动  
+					if (event.deltaY < 0) {   
+						if(this.viewScale < 5){
+							this.viewScale += 0.1;
+						}
+					} else {  
+						if(this.viewScale > 0){
+							this.viewScale -= 0.1;
+						}
+					}
+				  event.preventDefault();  
+				});
+			}
+			
+		},
 		// 选择目录
 		pickPath() {
 			this.$refs['upload-input'].blur();
@@ -1351,6 +1398,8 @@ export default {
 				this.setDefaultCropData();
 				this.cropOptionsImgInfo = {};
 			}
+			
+			this.rollFlag = false;
         },
 		setMenuIndex(index){
 			this.menuIndex = index;
@@ -1363,10 +1412,14 @@ export default {
 			}else if(index == 7){
 				this.setChange();
 			}
-			
 			if(this.imgList.length > 0){
 				this.setDefaultImgInfo(this.imgList[0]);
 			}
+			
+			if([3,4,5,6,9].indexOf(this.menuIndex) == -1){ // 滚动事件
+				this.rollFlag = false;
+			}
+			
 		},
 		setDefaultCropData(){
 			this.cropOptions = {
@@ -1403,9 +1456,12 @@ export default {
 				colorNum: 256, // 颜色数量
                 color: '0', // 图片色彩
                 sizeType: '1', // 调整尺寸
-                scaling: 90, // 缩放比例
+                scaling: 100, // 缩放比例
 				colorValue: 256,
+				paintValue: 1, // 油画数值
                 brightnessValue: 0, // 亮度
+				saturationValue: 0, //饱和度
+				hueValue: 0, // 色调
                 contrastValue: 0, // 对比度
                 rotateValue: 0, // 旋转角度
                 opacityValue: 100, // 透明度
@@ -1428,7 +1484,7 @@ export default {
 				lineFlag: false,
 				lineWidth: 3,
 				lineColor: '#ff0000',
-				fonts:'',
+				fonts: this.defaultFont.toString(),
 				rotate: 30,
 				circularFlag: false,
 				circularValue: 10,
@@ -1568,12 +1624,20 @@ export default {
 			this.handleData.height = this.imgInfo.height;
 			this.imgLoading = true;
 		
-			electronApi.fileStream(this.imgInfo.path).then(buffer => {
-				this.imgSrc = "data:image/png;base64,"+buffer.toString('base64');
-				this.imgLoading = false;
-			}).catch(err => {
-				this.imgLoading = false;
-			})
+			if([1,2,11].indexOf(this.menuIndex) == -1){
+				electronApi.fileStream(this.imgInfo.path).then(buffer => {
+					this.imgSrc = "data:image/png;base64,"+buffer.toString('base64');
+					this.imgLoading = false;
+				}).catch(err => {
+					this.imgLoading = false;
+				})
+			}
+			
+			if([3,4,5,6,9].indexOf(this.menuIndex) > -1){ // 绑定滚动事件
+				setTimeout(() => {
+					this.initRoll();
+				}, 600);
+			}
 			
 		},
         // 选择新路径
@@ -1587,11 +1651,7 @@ export default {
 			this.imgInfo = currentRow;
 			this.imgInfoIndex = index;
 			
-			if([1,2,3,6,7,8,9].indexOf(this.menuIndex) > -1){
-				if(this.menuIndex == 1){
-					this.handleData.imgFormat = 'JPG';
-				}
-
+			if([3,6,7,9].indexOf(this.menuIndex) > -1){
 				this.imgLoading = true;
 				electronApi.fileStream(currentRow.path).then(buffer => {
 					this.imgSrc = "data:image/png;base64,"+buffer.toString('base64');
@@ -1601,8 +1661,10 @@ export default {
 				})
 				this.handleData.width = Number(currentRow.width);
 				this.handleData.height = Number(currentRow.height);
-			}else{
+			}else if([4,5].indexOf(this.menuIndex) > -1){
 				this.handleImg();
+			}else if(this.menuIndex == 1){
+				this.handleData.imgFormat = 'JPG';
 			}
         },
         // 导出
@@ -1737,6 +1799,7 @@ export default {
         },
 		// 处理图片
 		dealImg(index, img, path){
+			let reduceFlag = img ? false : true;
 			let imgInfo = img ? img : this.imgInfo;
 			let newPath = img ? path : this.previewTmpPath;
 			let task = '';
@@ -2081,26 +2144,41 @@ export default {
 					task = new Promise((resolve,reject) => {
 						let extraParams2 = [];
 						let extraParams3 = [];
-						if (this.handleData.color == '1') { // 色彩
-							// extraParams2 = ['-colors',245];
-						} else if (this.handleData.color == '2') { // 灰色
-							extraParams2 = ['-type','Grayscale'];
-						} else if (this.handleData.color == '3') { // 反转
-							extraParams2 = ['-channel', 'RGB', '-negate'];
+						let reduceParams = [];
+						switch (this.handleData.color){
+							case '1': // 黑白
+								extraParams2 = ['-type', 'bilevel'];
+								break;
+							case '2':  // 灰色
+								extraParams2 = ['-type','grayscale'];
+								break;
+							case '3': // 反转
+								extraParams2 = ['-channel', 'RGB', '-negate'];
+								break;
+							case '4': // 油画
+								extraParams2 = ['-paint', Number(this.handleData.paintValue)-1];
+								break;
 						}
 
 						if(this.handleData.lineFlag){
 							extraParams3 = ['-bordercolor',this.handleData.lineColor,'-border',this.handleData.lineWidth];
 						}
+						
+						if(reduceFlag){ // 缩小尺寸实现快速渲染???
+							//reduceParams = ['-resize','10%'];
+						}
 
 						let params2 = [
 							'convert.exe',
 							imgInfo.path,
 							'-monitor',
+							...reduceParams,
 							'-colors',
 							this.handleData.colorValue,
 							'-brightness-contrast',
 							`${Number(this.handleData.brightnessValue)}/${Number(this.handleData.contrastValue)}`,
+							'-modulate',
+							'100,'+ Number(this.handleData.saturationValue+100) + ',' + Number(this.handleData.hueValue+100),
 							'-alpha', 'set', '-channel', 'A', '-evaluate', 'Multiply', this.handleData.opacityValue/100, '+channel',
 							...extraParams2,
 							...extraParams3,