mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-09-01 05:27:42 +08:00
284 lines
11 KiB
Vue
284 lines
11 KiB
Vue
<template>
|
|
<el-form
|
|
label-position="top"
|
|
require-asterisk-position="right"
|
|
label-width="10vw"
|
|
size="default"
|
|
:model="waterMarkForm"
|
|
>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIP_PROCESS_EXT_LIST')">
|
|
<el-input v-model="skipProcessForm.skipProcessExtList" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
|
|
<div class="text-xs text-gray-500">
|
|
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_SKIP_PROCESS_EXT_LIST_TIPS') }}
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM')">
|
|
<el-switch v-model="waterMarkForm.isAddWatermark" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')">
|
|
<el-radio-group v-model="waterMarkForm.watermarkType">
|
|
<el-radio value="text">
|
|
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
|
|
</el-radio>
|
|
<el-radio value="image">
|
|
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')">
|
|
<el-switch v-model="waterMarkForm.isFullScreenWatermark" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')">
|
|
<el-input-number v-model="waterMarkForm.watermarkDegree" :step="1" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
|
|
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')"
|
|
>
|
|
<el-input v-model="waterMarkForm.watermarkText" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
|
|
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT_FONT_PATH')"
|
|
>
|
|
<el-input v-model="waterMarkForm.watermarkFontPath" />
|
|
</el-form-item>
|
|
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')">
|
|
<el-input-number v-model="waterMarkForm.watermarkScaleRatio" :min="0" :max="1" :step="0.01" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
|
|
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')"
|
|
>
|
|
<el-color-picker v-model="waterMarkForm.watermarkColor" show-alpha />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'image'"
|
|
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')"
|
|
>
|
|
<el-input v-model="waterMarkForm.watermarkImagePath" />
|
|
</el-form-item>
|
|
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')">
|
|
<el-radio-group v-model="waterMarkForm.watermarkPosition">
|
|
<el-radio v-for="item in waterMarkPositionMap" :key="item[0]" :value="item[0]">
|
|
{{ item[1] }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF')">
|
|
<el-switch v-model="compressForm.isRemoveExif" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')">
|
|
<el-input-number v-model="compressForm.quality" :min="1" :max="100" :step="1" />
|
|
</el-form-item>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT')">
|
|
<el-switch v-model="compressForm.isConvert" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')">
|
|
<el-select v-model="compressForm.convertFormat" :persistent="false" teleported>
|
|
<el-option v-for="item in availableFormat" :key="item" :label="item" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')">
|
|
<el-input
|
|
v-model="formatConvertObj"
|
|
placeholder='{"jpg": "png", "png": "jpg"}'
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')">
|
|
<el-switch v-model="compressForm.isFlip" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP')">
|
|
<el-switch v-model="compressForm.isFlop" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE')">
|
|
<el-switch v-model="compressForm.isReSize" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')">
|
|
<el-input-number v-model="compressForm.reSizeWidth" :min="0" />
|
|
</el-form-item>
|
|
<el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')">
|
|
<el-input-number v-model="compressForm.reSizeHeight" :min="0" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-show="compressForm.isReSize && compressForm.reSizeHeight! > 0 && compressForm.reSizeWidth === 0"
|
|
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
|
|
>
|
|
<el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-show="compressForm.isReSize && compressForm.reSizeWidth! > 0 && compressForm.reSizeHeight === 0"
|
|
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
|
|
>
|
|
<el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT')">
|
|
<el-switch v-model="compressForm.isReSizeByPercent" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item v-show="compressForm.isReSizeByPercent" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')">
|
|
<el-input-number v-model="compressForm.reSizePercent" :min="0" />
|
|
</el-form-item>
|
|
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')">
|
|
<el-switch v-model="compressForm.isRotate" :style="switchStyle" />
|
|
</el-form-item>
|
|
<el-form-item v-show="compressForm.isRotate" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')">
|
|
<el-input-number v-model="compressForm.rotateDegree" :step="1" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSaveConfig">
|
|
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }}
|
|
</el-button>
|
|
<el-button @click="closeDialog">
|
|
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CANCEL') }}
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
|
|
import { onBeforeMount, reactive, ref, toRaw } from 'vue'
|
|
|
|
import { T as $T } from '@/i18n/index'
|
|
import { getConfig, saveConfig } from '@/utils/dataSender'
|
|
import { configPaths } from '#/utils/configPaths'
|
|
|
|
const imageProcessDialogVisible = defineModel<boolean>()
|
|
|
|
const waterMarkPositionMap = new Map([
|
|
['north', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP')],
|
|
['northeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_RIGHT')],
|
|
['southeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_RIGHT')],
|
|
['south', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM')],
|
|
['southwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_LEFT')],
|
|
['northwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_LEFT')],
|
|
['west', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_LEFT')],
|
|
['east', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_RIGHT')],
|
|
['centre', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_CENTER')]
|
|
])
|
|
const imageExtList = ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'tiff', 'tif', 'svg', 'ico', 'avif', 'heif', 'heic']
|
|
const availableFormat = [
|
|
'avif',
|
|
'dz',
|
|
'fits',
|
|
'gif',
|
|
'heif',
|
|
'input',
|
|
'jpeg',
|
|
'jpg',
|
|
'jp2',
|
|
'jxl',
|
|
'magick',
|
|
'openslide',
|
|
'pdf',
|
|
'png',
|
|
'ppm',
|
|
'raw',
|
|
'svg',
|
|
'tiff',
|
|
'tif',
|
|
'v',
|
|
'webp'
|
|
]
|
|
|
|
const waterMarkForm = reactive<IBuildInWaterMarkOptions>({
|
|
isAddWatermark: false,
|
|
watermarkType: 'text',
|
|
isFullScreenWatermark: false,
|
|
watermarkDegree: 0,
|
|
watermarkText: '',
|
|
watermarkFontPath: '',
|
|
watermarkScaleRatio: 0.15,
|
|
watermarkColor: '#CCCCCC73',
|
|
watermarkImagePath: '',
|
|
watermarkPosition: 'southeast'
|
|
})
|
|
|
|
const compressForm = reactive<IBuildInCompressOptions>({
|
|
quality: 100,
|
|
isConvert: false,
|
|
convertFormat: 'jpg',
|
|
isReSize: false,
|
|
reSizeWidth: 500,
|
|
reSizeHeight: 500,
|
|
skipReSizeOfSmallImg: false,
|
|
isReSizeByPercent: false,
|
|
reSizePercent: 50,
|
|
isRotate: false,
|
|
rotateDegree: 0,
|
|
isRemoveExif: false,
|
|
isFlip: false,
|
|
isFlop: false
|
|
})
|
|
const formatConvertObj = ref('{}')
|
|
|
|
const skipProcessForm = reactive({
|
|
skipProcessExtList: 'zip,rar,7z,tar,gz,tar.gz,tar.bz2,tar.xz'
|
|
})
|
|
|
|
const waterMarkFormKeys = Object.keys(waterMarkForm) as (keyof typeof waterMarkForm)[]
|
|
const compressFormKeys = Object.keys(compressForm) as (keyof typeof compressForm)[]
|
|
const skipProcessFormKeys = Object.keys(skipProcessForm) as (keyof typeof skipProcessForm)[]
|
|
|
|
const switchStyle = '--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;'
|
|
|
|
function handleSaveConfig() {
|
|
let iformatConvertObj = {}
|
|
try {
|
|
iformatConvertObj = JSON.parse(formatConvertObj.value)
|
|
} catch (error) {}
|
|
const formatConvertObjEntries = Object.entries(iformatConvertObj)
|
|
const formatConvertObjEntriesFilter = formatConvertObjEntries.filter((item: any) => {
|
|
return imageExtList.includes(item[0]) && availableFormat.includes(item[1])
|
|
})
|
|
const formatConvertObjFilter = Object.fromEntries(formatConvertObjEntriesFilter)
|
|
formatConvertObj.value = JSON.stringify(formatConvertObjFilter)
|
|
compressForm.formatConvertObj = formatConvertObjFilter
|
|
saveConfig(configPaths.buildIn.compress, toRaw(compressForm))
|
|
saveConfig(configPaths.buildIn.watermark, toRaw(waterMarkForm))
|
|
saveConfig(configPaths.buildIn.skipProcess, toRaw(skipProcessForm))
|
|
closeDialog()
|
|
}
|
|
|
|
async function initData() {
|
|
const compress = await getConfig<any>(configPaths.buildIn.compress)
|
|
const watermark = await getConfig<any>(configPaths.buildIn.watermark)
|
|
const skipProcess = await getConfig<any>(configPaths.buildIn.skipProcess)
|
|
if (compress) {
|
|
compressFormKeys.forEach(key => {
|
|
compressForm[key] = compress[key] ?? compressForm[key]
|
|
})
|
|
try {
|
|
if (typeof compress.formatConvertObj === 'object') {
|
|
formatConvertObj.value = JSON.stringify(compress.formatConvertObj)
|
|
} else {
|
|
formatConvertObj.value = compress.formatConvertObj ?? '{}'
|
|
}
|
|
} catch (error) {
|
|
formatConvertObj.value = '{}'
|
|
}
|
|
}
|
|
if (watermark) {
|
|
waterMarkFormKeys.forEach(key => {
|
|
waterMarkForm[key] = watermark[key] ?? waterMarkForm[key]
|
|
})
|
|
waterMarkForm.watermarkColor = watermark.watermarkColor === '' ? '#CCCCCC73' : watermark.watermarkColor
|
|
}
|
|
if (skipProcess) {
|
|
skipProcessFormKeys.forEach(key => {
|
|
skipProcessForm[key] = skipProcess[key] ?? skipProcessForm[key]
|
|
})
|
|
}
|
|
}
|
|
|
|
function closeDialog() {
|
|
imageProcessDialogVisible.value = false
|
|
}
|
|
|
|
onBeforeMount(async () => {
|
|
await initData()
|
|
})
|
|
</script>
|