|
|
@@ -149,35 +149,182 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 底部设置区域 -->
|
|
|
- <!-- <div class="img-footer-area" v-if="(menuIndex != '8' && videoList.length > 0) || (menuIndex == 8 && videoList.length > 0)">
|
|
|
+ <div class="img-footer-area" v-if="(menuIndex == '1' && imgList.length > 0) || (menuIndex == '2' && fileList.length > 0) || (menuIndex == '3' && videoList.length > 0)">
|
|
|
<div class="footer-line-between">
|
|
|
-
|
|
|
- <div class="handle-item" v-if="menuIndex == '1' || menuIndex == '2'">
|
|
|
- <label class="handle-label">输出格式：</label>
|
|
|
- <el-select v-model="handleData.format" style="width:100px;" size="small">
|
|
|
- <el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
|
|
|
- </el-select>
|
|
|
- <label class="handle-label">声道：</label>
|
|
|
- <el-select v-model="handleData.type" style="width:100px;" size="small">
|
|
|
- <el-option :value="1" label="同源音频"></el-option>
|
|
|
- <el-option :value="2" label="单声道"></el-option>
|
|
|
- <el-option :value="3" label="双声道"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="handle-item" v-if="menuIndex == '3'">
|
|
|
- <label class="handle-label">压缩级别：</label>
|
|
|
- <el-select v-model="handleData.compressLevel" style="width:100px;" size="small">
|
|
|
- <el-option :value="1" label="1"></el-option>
|
|
|
- <el-option :value="2" label="2"></el-option>
|
|
|
- <el-option :value="3" label="3"></el-option>
|
|
|
- </el-select>
|
|
|
- <span style="margin-left: 10px; font-size: 12px; color: #F56C6C;">等级越高压缩效果越好</span>
|
|
|
+ <div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">水印类型：</label>
|
|
|
+ <el-select size="small" v-model="handleData.watermarkType" style="width:90px;">
|
|
|
+ <el-option value="1" label="文字水印"></el-option>
|
|
|
+ <el-option value="2" label="图片水印"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select size="small" v-if="this.menuIndex != 3" v-model="handleData.watermarkStyle" style="width:90px;" @change="handleImg">
|
|
|
+ <el-option :value="1" label="单个"></el-option>
|
|
|
+ <el-option :value="2" label="平铺"></el-option>
|
|
|
+ <el-option :value="3" v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2'" label="多个"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <!-- 文字水印 -->
|
|
|
+ <div v-if="handleData.watermarkType == '1'">
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">文字内容：</label>
|
|
|
+ <el-input type="text" v-model="handleData.watermarkValue" size="small" placeholder="请输入文字水印内容" style="width:150px;" @blur="handleImg"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">文字颜色：</label>
|
|
|
+ <el-color-picker style="vertical-align: middle;" size="small" v-model="handleData.watermarkColor" @change="handleImg"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">文字大小：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.watermarkFont" @change="handleImg" :min="1" :max="200" :step="1" style="width: 120px;"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">不透明度：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :min="1" :max="100" :step="1" style="width: 120px;"></el-input-number>%
|
|
|
+ </div>
|
|
|
+ <div class="handle-item" v-if="menuIndex != '3'">
|
|
|
+ <label class="handle-label">旋转角度：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1" style="width: 120px;"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">文字字体：</label>
|
|
|
+ <el-select size="small" v-model="handleData.fonts" style="width:170px;" @change="handleImg">
|
|
|
+ <el-option v-for="(item,key) in fonts" :value="item.path" :key="key" :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 && menuIndex != '3'">
|
|
|
+ <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;" v-model="handleData.watermarkDensityY" @change="handleImg" :step="1" :min="1"></el-input-number>
|
|
|
+ <label class="density-label">列数</label>
|
|
|
+ <el-input-number size="small" style="width: 60px;" v-model="handleData.watermarkDensityX" @change="handleImg" :step="1" :min="1"></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="menuIndex == '3'">
|
|
|
+ <div class="handle-item" style="overflow: hidden;">
|
|
|
+ <label class="handle-label">动态滚动：</label>
|
|
|
+ <div class="line-density" style="vertical-align:middle">
|
|
|
+ <label class="density-label">方向</label>
|
|
|
+ <el-select size="small" v-model="handleData.direction" style="width:140px;" @change="handleImg">
|
|
|
+ <el-option value="0" label="无"></el-option>
|
|
|
+ <el-option value="left2right" label="从左往右"></el-option>
|
|
|
+ <el-option value="right2left" label="从右往左"></el-option>
|
|
|
+ <el-option value="top2bottom" label="从上往下"></el-option>
|
|
|
+ <el-option value="bottom2top" label="从下往上"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <template v-if="handleData.direction != 0">
|
|
|
+ <div style="margin-top: 5px;">
|
|
|
+ <label class="density-label">速度</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.speed" @change="handleImg" :step="1" :min="1" style="width: 60px;"></el-input-number>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- 图片水印 -->
|
|
|
+ <div v-if="handleData.watermarkType == '2'">
|
|
|
+ <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:140px;" ></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="handleData.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="handleData.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="handle-item" v-if="handleData.watermarkType == '2' && menuIndex != 3">
|
|
|
+ <label class="handle-label">旋转角度：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item" v-if="handleData.watermarkType != '0'">
|
|
|
+ <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 style="display: inline-block;float: right;">
|
|
|
+ <div style="padding: 6px 0;">
|
|
|
+ <label class="">水平边距</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="">垂直边距</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="handleData.watermarkType == '2' && handleData.watermarkStyle == 2 && menuIndex != '3'">
|
|
|
+ <div class="handle-item" 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: 120px;" v-model="handleData.watermarkDensityY" :step="1" :min="1" @change="handleImg" ></el-input-number>
|
|
|
+ <label class="density-label">列数</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" :step="1" :min="1" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 多个水印 -->
|
|
|
+ <template v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2' && this.handleData.watermarkStyle == 3" >
|
|
|
+ <div v-for="(item, index) in watermarkImgList" :key="index">
|
|
|
+ <div class="handle-title">第{{index+2}}张水印信息 <Button size="small" type="error" @click="delWatermark(index)">删除</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:140px;" ></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="width: 120px;" 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" style="width: 120px;" 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 style="display: inline-block;float: right;">
|
|
|
+ <div style="padding: 6px 0;">
|
|
|
+ <label class="">水平边距</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="item.watermarkX" @change="handleImg"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="">垂直边距</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="item.watermarkY" @change="handleImg"></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="text-align: center; margin: 10px 0;">
|
|
|
+ <el-button @click="moreImgWater()">添加一张水印图片</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
-
|
|
|
- <div v-else></div>
|
|
|
-
|
|
|
+
|
|
|
<div>
|
|
|
<span>保存目录：</span>
|
|
|
<el-input :title="handleData.newPath" ref="upload-input" @focus="pickPath" placeholder="请选择输出目录" size="small" v-model="handleData.newPath" readonly style="width:180px;" prefix-icon="el-icon-folder"></el-input>
|
|
|
@@ -187,7 +334,7 @@
|
|
|
<el-button type="danger" style="margin-left: 20px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<!-- 合并进度 -->
|
|
|
@@ -258,21 +405,59 @@ export default {
|
|
|
|
|
|
downloadDir: '', // 默认下载目录
|
|
|
handleData: {
|
|
|
- pathType: 2,
|
|
|
- isOriginal: true,
|
|
|
- format: 'mp3',
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ pathType: '2', // 输出目录类型
|
|
|
newPath: os.userInfo().homedir + separator + "Downloads", // 新路径
|
|
|
- type: 1, // 声道
|
|
|
- quality: '1', // 图片品质
|
|
|
- compressLevel: 1,
|
|
|
- split_type: 1,
|
|
|
- split_num: 2,
|
|
|
- split_time: '00:00:10',
|
|
|
- speed: 1.5,
|
|
|
- volume: 1.5,
|
|
|
+ autoRename: false, // 是否自动重命名
|
|
|
+ watermarkType: '1', // 水印类型 1文字 2图片
|
|
|
+ watermarkStyle: 1, // 1 单个 2平铺
|
|
|
+ watermarkValue: '', // 水印文字内容
|
|
|
+ watermarkColor: 'rgba(0, 0, 0, 1)',
|
|
|
+ watermarkFont: 20,
|
|
|
+ watermarkX: 0,
|
|
|
+ watermarkY: 0,
|
|
|
+ watermarkDensityX: 3, // 平铺水印密度
|
|
|
+ watermarkDensityY: 3, // 平铺水印密度
|
|
|
+ watermarkImgPath: '', //图片水印路径
|
|
|
+ watermarkImgType: '', //图片水印类型
|
|
|
+ watermarkImgOpactiy: 100, // 水印不透明度
|
|
|
+ scaling: 100, // 水印缩放比例
|
|
|
+ watermarkPosition: 'Center', // 水印位置
|
|
|
+ fonts: 'c:\\windows\\fonts\\simkai.ttf',
|
|
|
+ rotate: 30,
|
|
|
+ direction:'0',
|
|
|
+ speed: 2,
|
|
|
+ },
|
|
|
+ fonts:[{
|
|
|
+ name:'宋体',
|
|
|
+ path:'c:\\windows\\fonts\\simsun.ttc',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'仿宋',
|
|
|
+ path:'c:\\windows\\fonts\\simfang.ttf',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'新宋体',
|
|
|
+ path:'c:\\windows\\fonts\\simsun.ttc',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'楷体',
|
|
|
+ path:'c:\\windows\\fonts\\simkai.ttf',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'微软雅黑 常规',
|
|
|
+ path:'c:\\windows\\fonts\\msyh.ttc',
|
|
|
},
|
|
|
- isDrop: false,
|
|
|
- split_timeStr: new Date(2024, 12, 12, 0, 0, 10),
|
|
|
+ {
|
|
|
+ name:'微软雅黑 粗体',
|
|
|
+ path:'c:\\windows\\fonts\\msyhbd.ttc'
|
|
|
+ }],
|
|
|
+ defaultFont: 'c:\\windows\\fonts\\simkai.ttf',
|
|
|
+ watermarkPosition:['NorthWest','North','NorthEast','West','Center','East','SouthWest','South','SouthEast'],
|
|
|
+ watermarkImgList: [], // pdf多张水印图片
|
|
|
+ waterMoreIndex: -1,
|
|
|
+
|
|
|
dowloadModel: false,
|
|
|
finishModel: false,
|
|
|
version: '0.0.1',
|
|
|
@@ -2006,4 +2191,15 @@ export default {
|
|
|
.el-tabs__item:hover{
|
|
|
color: #F56C6C !important;
|
|
|
}
|
|
|
+
|
|
|
+ .position-radio{
|
|
|
+
|
|
|
+ .el-radio__label{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-radio{
|
|
|
+ margin: 8px 20px 8px 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
