feat: 显示压缩率

ATQQ · Mar 14, 2024 · aa79352 · aa79352
1 parent e06e306
commit aa79352
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/packages/client/src/components/ImageList.vue b/packages/client/src/components/ImageList.vue
@@ -7,6 +7,7 @@ import { ElMessageBox } from 'element-plus'
 import { IImage } from '@/store/modules/imageStore'
 import { ref } from 'vue'
 import { useUploadConfig } from '@/composables';
+import { calculateCompressionPercentage } from '@/utils/file';
 const imageStore = useImageStore()
 const copyAddress = (url: string) => {
   copyRes(url)
@@ -28,6 +29,7 @@ const checkInfo = (image: IImage) => {
         <li>上传时间：${image.date && formatDate(image.date)}</li>
         <li>大小：${image.size ? formatSize(image.size) : '未知'}</li>  
         ${image.originSize ? `<li>压缩前大小：${formatSize(image.originSize)}</li>` : ''}
+        ${image.originSize ? `<li>压缩率：${calculateCompressionPercentage(image.originSize, image.size)}%</li>` : ''}
       </ul>
       </div>`
   })
@@ -57,11 +59,12 @@ const showImage = computed(() => {
             </a>
           </span>
           <span style="width: 160px;" class="right">
-            <el-button v-if="image.size" :type="image.originSize ? 'success' : 'warning'" link>{{ formatSize(image.size)
-              }}</el-button>
-            <el-button type="primary" link @click="checkInfo(image)">🔍</el-button>
-            <el-button type="primary" link @click="copyAddress(image.url)">url</el-button>
-            <el-button type="success" link @click="copyMdAddress(image.url)">markdown</el-button>
+            <el-button v-if="image.size" :type="image.originSize ? 'success' : 'warning'" link>
+              {{ formatSize(image.size) }}
+            </el-button>
+            <el-button type="primary" link @click="checkInfo(image)" title="查看图片信息">🔍</el-button>
+            <el-button type="primary" link @click="copyAddress(image.url)" title="复制图片地址">url</el-button>
+            <el-button type="success" link @click="copyMdAddress(image.url)" title="复制markdown格式图片地址">md</el-button>
           </span>
         </div>
       </div>

diff --git a/packages/client/src/utils/file.ts b/packages/client/src/utils/file.ts
@@ -45,6 +45,17 @@ async function compressImage(file: File, ops: CompressOptions = {}) {
   return file.size > newFile.size ? newFile : file
 }
 
+/**
+ * 计算压缩比例
+ */
+function calculateCompressionPercentage(originalSize: number, compressedSize: number) {
+  if (originalSize === 0) {
+    return 0
+  }
+  const percentageDecreased = ((originalSize - compressedSize) / originalSize) * 100
+  return percentageDecreased.toFixed(2) // Returns the percentage with 2 decimal places
+}
+
 function getBlobArrayBuffer(file: Blob): Promise<ArrayBuffer> {
   return file.arrayBuffer()
 }
@@ -91,4 +102,5 @@ function convertQualityToBit(quality: number): number {
 export {
   compressImage,
   getImageDimensions,
+  calculateCompressionPercentage,
 }