|
|
@@ -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,
|
