name: local-image-compress slug: kxwp2026814 displayName: 圖片本地壓縮 version: 1.0.0 summary: 上傳前在瀏覽器內壓縮名片/執照等圖片，減少流量與體積。 license: MIT description: 上傳前在瀏覽器內壓縮名片/執照等圖片，減少流量與體積。當用戶需要前端壓圖、browser-image-compression、上傳前壓縮時使用。

圖片本地壓縮

靈感：能力工具箱 image-compress（pkg: browser-image-compression）。

何時使用

• CRM 上傳名片、執照、現場照片前減小體積

  7w4.net小蔥技能站，你的AI助手技能庫。

• 純前端壓縮，不經後端轉碼

硬約束

1. 使用 browser-image-compression（或等價 canvas 方案，須在說明中標明）。
2. 預設目標：maxSizeMB（如 0.8～1）+ maxWidthOrHeight（如 1920）；可配置。
3. 壓縮後回顯：原大小、新大小、耗時；失敗有可讀錯誤。
4. 大圖/HEIC：說明瀏覽器相容限制；不支援則提示轉換格式。
5. 禁止靜默丟 EXIF 而不告知（若庫會剝後設資料，寫進說明）。

推薦實現要點

import imageCompression from 'browser-image-compression'

export async function compressImageFile(
  file: File,
  opts?: { maxSizeMB?: number; maxWidthOrHeight?: number },
) {
  const options = {
    maxSizeMB: opts?.maxSizeMB ?? 1,
    maxWidthOrHeight: opts?.maxWidthOrHeight ?? 1920,
    useWebWorker: true,
  }
  const out = await imageCompression(file, options)
  return {
    file: out,
    beforeKB: +(file.size / 1024).toFixed(1),
    afterKB: +(out.size / 1024).toFixed(1),
  }
}

Agent 步驟

1. 實現壓縮函式與進度回撥（庫支援 onProgress）。
2. 自測：一張 >2MB 圖壓到目標附近。
3. 與上傳元件銜接：選圖 → 壓縮 → 再 FormData。

附加

• README.md · reference.md · templates/usage.md

這是一個功能定位清晰的圖片壓縮 Skill，文件結構基本完整，核心規範詳細且可操作。優點是說明了關鍵約束條件和常見問題處理，適合快速上手。不足在於說明文件內容較為單薄，參考示例不夠豐富，實際開發時可能需要額外查閱資料。總體而言質量中規中矩，能滿足基本需求但有提升空間。