|
|
@@ -57,6 +57,10 @@
|
|
|
<img src="../assets/image/m-feige.png" class="m-image"/>
|
|
|
<span slot="title">图片分割</span>
|
|
|
</el-menu-item>
|
|
|
+ <el-menu-item index="13" @click="setMenuIndex(13)">
|
|
|
+ <img src="../assets/image/m-over.png" class="m-image"/>
|
|
|
+ <span slot="title">图片叠加</span>
|
|
|
+ </el-menu-item>
|
|
|
<!-- <el-menu-item index="13" @click="setMenuIndex(13)">
|
|
|
<img src="../assets/image/m-web.png" class="m-image"/>
|
|
|
<span slot="title">网页转图片</span>
|
|
|
@@ -151,8 +155,8 @@
|
|
|
</template>
|
|
|
|
|
|
|
|
|
- <!-- 3、更改尺寸 4、美化图片 5、添加水印 6、图片圆角 9、批量旋转 10、图片裁剪 12、图片分割 -->
|
|
|
- <template v-else-if="[3,4,5,6,9,10,12].indexOf(menuIndex) > -1">
|
|
|
+ <!-- 3、更改尺寸 4、美化图片 5、添加水印 6、图片圆角 9、批量旋转 10、图片裁剪 12、图片分割 13、图片叠加 -->
|
|
|
+ <template v-else-if="[3,4,5,6,9,10,12,13].indexOf(menuIndex) > -1">
|
|
|
<div class="soft-content">
|
|
|
<div class="content-left" style="width: calc(100% - 270px)">
|
|
|
<!-- 图片裁剪 -->
|
|
|
@@ -581,6 +585,92 @@
|
|
|
<el-input-number size="small" v-model="cutY" :min="1" :max="100"></el-input-number>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
+ <!-- 13图片叠加 -->
|
|
|
+ <template v-if="menuIndex == 13">
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">叠加图片：</label>
|
|
|
+ <el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPath">
|
|
|
+ <el-input type="text" readonly v-model="handleData.watermarkImgPath" size="small" style="width:125px;" ></el-input>
|
|
|
+ <i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">缩放比例：</label>
|
|
|
+ <el-input-number size="small" style="margin-right:5px;" :min="1" :max="200" v-model="handleData.watermarkImgSize" @change="handleImg" ></el-input-number>%
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">不透明度：</label>
|
|
|
+ <el-input-number size="small" style="margin-right:5px;" :min="1" :max="100" v-model="handleData.watermarkImgOpactiy" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">旋转角度：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.watermarkImgRotate" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">水印位置：</label>
|
|
|
+ <el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
|
|
|
+ <el-radio :disabled="handleData.watermarkStyle == '2' && handleData.watermarkType == 1" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <div>
|
|
|
+ <div style="padding-bottom: 3px;">
|
|
|
+ <label class="handle-label">水平边距：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="handle-label">垂直边距：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 多个水印 -->
|
|
|
+ <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-item" @click="waterMoreIndex = index">
|
|
|
+ <label class="handle-label">选择图片：</label>
|
|
|
+ <el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPathMore">
|
|
|
+ <el-input type="text" readonly v-model="item.watermarkImgPath" size="small" style="width:125px;" ></el-input>
|
|
|
+ <i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">缩放比例：</label>
|
|
|
+ <el-input-number size="small" v-model="item.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number> %
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">不透明度：</label>
|
|
|
+ <el-input-number size="small" v-model="item.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number> %
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">旋转角度：</label>
|
|
|
+ <el-input-number size="small" v-model="item.rotate" @change="handleImg"></el-input-number>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">水印位置：</label>
|
|
|
+ <el-radio-group class="position-radio" v-model="item.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
|
|
|
+ <el-radio :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="">水平边距</label>
|
|
|
+ <el-input-number size="small" v-model="item.watermarkX" @change="handleImg"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="">垂直边距</label>
|
|
|
+ <el-input-number size="small" v-model="item.watermarkY" @change="handleImg"></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="text-align: center; margin: 10px 0;">
|
|
|
+ <el-button @click="moreImgWater()">添加一张叠加图</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1046,6 +1136,9 @@ export default {
|
|
|
|
|
|
cutX: 3,
|
|
|
cutY: 3,
|
|
|
+
|
|
|
+ watermarkImgList: [], // 叠加图水印
|
|
|
+ waterMoreIndex: -1,
|
|
|
};
|
|
|
},
|
|
|
computed:{
|
|
|
@@ -1781,7 +1874,7 @@ export default {
|
|
|
})
|
|
|
this.handleData.width = Number(currentRow.width);
|
|
|
this.handleData.height = Number(currentRow.height);
|
|
|
- }else if([4,5].indexOf(this.menuIndex) > -1){
|
|
|
+ }else if([4,5,13].indexOf(this.menuIndex) > -1){
|
|
|
this.handleImg();
|
|
|
}else if(this.menuIndex == 1){
|
|
|
this.handleData.imgFormat = 'JPG';
|
|
|
@@ -1925,6 +2018,15 @@ export default {
|
|
|
let task = '';
|
|
|
|
|
|
switch (this.menuIndex) {
|
|
|
+ case 13: //添加叠图
|
|
|
+ if(!this.handleData.watermarkImgPath){
|
|
|
+ this.$message({message: '请上传图片水印', type: 'warning'});
|
|
|
+ this.imgLoading = false;
|
|
|
+ break;
|
|
|
+ }else{
|
|
|
+ task = this.imgWatermark(index, imgInfo, newPath,!img);
|
|
|
+ }
|
|
|
+ break;
|
|
|
case 12: //图片分割
|
|
|
let name = imgInfo.name.substr(0, imgInfo.name.lastIndexOf('.'))
|
|
|
newPath = this.downloadDir + separator + pjson.softInfo.softName + separator + name + '_%d.' +imgInfo.type;
|
|
|
@@ -2441,7 +2543,7 @@ export default {
|
|
|
reject({type:this.menuIndex, index,err});
|
|
|
});
|
|
|
});
|
|
|
- break;
|
|
|
+ break;
|
|
|
|
|
|
case 5: // 添加水印
|
|
|
if (this.handleData.watermarkType == '1') { // 文字水印
|
|
|
@@ -3754,6 +3856,57 @@ export default {
|
|
|
}, 1000);
|
|
|
}, 300)
|
|
|
},
|
|
|
+ // 删除水印
|
|
|
+ delWatermark(index){
|
|
|
+ this.$confirm('确认要删除该水印图片吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.watermarkImgList.splice(index, 1);
|
|
|
+ this.handleImg();
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 再添加一张水印图片
|
|
|
+ moreImgWater(){
|
|
|
+ if(this.watermarkImgList.length >= 8){
|
|
|
+ this.$message.error("水印图片已达上限！");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let waterInfo = {
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ watermarkX: 0,
|
|
|
+ watermarkY: 0,
|
|
|
+ watermarkImgPath: '', //图片水印路径
|
|
|
+ watermarkImgType: '', //图片水印类型
|
|
|
+ watermarkImgOpactiy: 100, // 水印不透明度
|
|
|
+ scaling: 100, // 水印缩放比例
|
|
|
+ watermarkPosition: 'Center', // 水印位置
|
|
|
+ rotate: 30
|
|
|
+ };
|
|
|
+ this.watermarkImgList.push(waterInfo);
|
|
|
+ },
|
|
|
+ getImgPathMore(e){
|
|
|
+ if (e) {
|
|
|
+ let typeList = ['image/jpeg', 'image/png', 'image/jpg'];
|
|
|
+ if (typeList.indexOf(e.type) == -1) {
|
|
|
+ this.$message({message: '不是有效的图片文件！', type: 'warning'});
|
|
|
+ return false;
|
|
|
+ }else if(typeList.indexOf(e.type) == 0){
|
|
|
+ this.watermarkImgList[this.waterMoreIndex].watermarkImgType = 'jpg';
|
|
|
+ }else if(typeList.indexOf(e.type) == 1){
|
|
|
+ this.watermarkImgList[this.waterMoreIndex].watermarkImgType = 'png';
|
|
|
+ }
|
|
|
+
|
|
|
+ this.watermarkImgList[this.waterMoreIndex].watermarkImgPath = e.path;
|
|
|
+ this.handleImg();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
};
|
|
|
</script>
|
