✨ Feature(custom): support specific format option for image conversion

ISSUES CLOSED: #124

public/i18n/en.yml

@@ -120,6 +120,7 @@ UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF: Remove EXIF Info
 UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: Compression Quality
 UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: Convert Format
 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: Destination Format
+UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: 'Specific Format, Please enter in json format, e.g. {"png": "jpg"}'
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: Whether to flip vertically
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: Whether to flip horizontally
 UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: Resize to fixed size

public/i18n/zh-CN.yml

@@ -120,6 +120,7 @@ UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF: 是否移除EXIF信息
 UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: 压缩质量
 UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: 是否转换格式
 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: 转换目的格式
+UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: '精细化转换格式, 请输入JSON格式，如: {"png": "jpg"}'
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: 是否进行垂直翻转
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: 是否进行水平翻转
 UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: 是否按固定尺寸调整图片

public/i18n/zh-TW.yml

@@ -120,6 +120,7 @@ UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF: 是否移除EXIF信息
 UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: 壓縮質量
 UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: 是否轉換格式
 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: 轉換目的格式
+UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: '指定格式, 请输入JSON格式配置，如{"jpg":"png"}'
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: 是否進行垂直翻轉
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: 是否進行水平翻轉
 UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: 是否按固定尺寸調整圖片

src/renderer/pages/PicGoSetting.vue

@@ -1472,6 +1472,17 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item
+          v-show="compressForm.isConvert"
+          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')"
+        >
+          <el-input
+            v-model="compressForm.formatConvertObj"
+            placeholder="{&quot;jpg&quot;: &quot;png&quot;, &quot;png&quot;: &quot;jpg&quot;}"
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4}"
+          />
+        </el-form-item>
         <el-form-item
           :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')"
         >
@@ -1664,6 +1675,8 @@ const waterMarkPositionMap = new Map([
   ['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<any>({
@@ -1686,13 +1699,15 @@ const compressForm = reactive<any>({
   isReSize: false,
   reSizeWidth: 500,
   reSizeHeight: 500,
+  skipReSizeOfSmallImg: false,
   isReSizeByPercent: false,
   reSizePercent: 50,
   isRotate: false,
   rotateDegree: 0,
   isRemoveExif: false,
   isFlip: false,
-  isFlop: false
+  isFlop: false,
+  formatConvertObj: '{}'
 })
 
 function closeDialog () {
@@ -1700,6 +1715,17 @@ function closeDialog () {
 }
 
 function handleSaveConfig () {
+  let formatConvertObj = {}
+  try {
+    formatConvertObj = JSON.parse(compressForm.formatConvertObj)
+  } catch (error) {
+  }
+  const formatConvertObjEntries = Object.entries(formatConvertObj)
+  const formatConvertObjEntriesFilter = formatConvertObjEntries.filter((item: any) => {
+    return imageExtList.includes(item[0]) && availableFormat.includes(item[1])
+  })
+  const formatConvertObjFilter = Object.fromEntries(formatConvertObjEntriesFilter)
+  compressForm.formatConvertObj = formatConvertObjFilter
   saveConfig('buildIn.compress', toRaw(compressForm))
   saveConfig('buildIn.watermark', toRaw(waterMarkForm))
   closeDialog()
@@ -1723,6 +1749,11 @@ async function initForm () {
     compressForm.isRemoveExif = compress.isRemoveExif ?? false
     compressForm.isFlip = compress.isFlip ?? false
     compressForm.isFlop = compress.isFlop ?? false
+    try {
+      compressForm.formatConvertObj = JSON.stringify(compress.formatConvertObj ?? {})
+    } catch (error) {
+      compressForm.formatConvertObj = '{}'
+    }
   }
   if (watermark) {
     waterMarkForm.isAddWatermark = watermark.isAddWatermark ?? false

src/renderer/pages/Upload.vue

@@ -303,6 +303,17 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item
+          v-show="compressForm.isConvert"
+          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')"
+        >
+          <el-input
+            v-model="compressForm.formatConvertObj"
+            placeholder="{&quot;jpg&quot;: &quot;png&quot;, &quot;png&quot;: &quot;jpg&quot;}"
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4}"
+          />
+        </el-form-item>
         <el-form-item
           :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')"
         >
@@ -474,6 +485,8 @@ const waterMarkPositionMap = new Map([
   ['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<any>({
@@ -503,7 +516,8 @@ const compressForm = reactive<any>({
   rotateDegree: 0,
   isRemoveExif: false,
   isFlip: false,
-  isFlop: false
+  isFlop: false,
+  formatConvertObj: '{}'
 })
 
 function closeDialog () {
@@ -511,6 +525,17 @@ function closeDialog () {
 }
 
 function handleSaveConfig () {
+  let formatConvertObj = {}
+  try {
+    formatConvertObj = JSON.parse(compressForm.formatConvertObj)
+  } catch (error) {
+  }
+  const formatConvertObjEntries = Object.entries(formatConvertObj)
+  const formatConvertObjEntriesFilter = formatConvertObjEntries.filter((item: any) => {
+    return imageExtList.includes(item[0]) && availableFormat.includes(item[1])
+  })
+  const formatConvertObjFilter = Object.fromEntries(formatConvertObjEntriesFilter)
+  compressForm.formatConvertObj = formatConvertObjFilter
   saveConfig('buildIn.compress', toRaw(compressForm))
   saveConfig('buildIn.watermark', toRaw(waterMarkForm))
   closeDialog()
@@ -534,6 +559,11 @@ async function initData () {
     compressForm.isRemoveExif = compress.isRemoveExif ?? false
     compressForm.isFlip = compress.isFlip ?? false
     compressForm.isFlop = compress.isFlop ?? false
+    try {
+      compressForm.formatConvertObj = JSON.stringify(compress.formatConvertObj ?? {})
+    } catch (error) {
+      compressForm.formatConvertObj = '{}'
+    }
   }
   if (watermark) {
     waterMarkForm.isAddWatermark = watermark.isAddWatermark ?? false

src/universal/types/i18n.d.ts

@@ -117,6 +117,7 @@ interface ILocales {
   UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: string
   UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: string
   UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: string
+  UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: string
   UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: string
   UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: string
   UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: string