|
@@ -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'){ // 缩小
|