範例

Image Cropper 的實用範例與常見使用情境。

基礎範例

製作個人頭像

從任意圖片製作合適的方形頭像：

上傳照片
- 選擇人像照或合照
- 支援 JPEG、PNG 等常見格式
將長寬比設為 1:1
- 在長寬比設定中點擊 1:1
- 裁切區域會變成標準正方形
調整裁切區域位置
- 將裁切框置中到人物臉部
- 調整大小，保留想呈現的內容
設定匯出參數
- 格式：PNG（需要透明背景時更合適）
- 尺寸：多數平台建議 400x400
- 品質：若使用 JPEG，建議 90%

結果：得到適合社群媒體個人頁面的專業方形頭像。

社群媒體最佳化

Instagram 貼文（1:1）

長寬比：1:1
建議尺寸：1080x1080
格式：JPEG
品質：85%

Instagram 限時動態（9:16）

長寬比：9:16
建議尺寸：1080x1920
格式：JPEG
品質：80%

Twitter 橫幅（16:9）

長寬比：16:9
建議尺寸：1500x500
格式：JPEG
品質：90%

電商商品圖片

用來製作風格一致的商品圖：

統一裁切尺寸
- 主圖使用 1000x1000
- 細節圖使用 800x600
- 白色背景通常更利於展示
批次處理流程
- 輸出格式設為 JPEG
- 品質設為 85%
- 統一使用 1:1 長寬比
- 所有商品圖採用相同設定處理

進階範例

Web 設計素材

Hero 區塊圖片

長寬比：16:9 或 21:9
尺寸：1920x1080 或 2560x1080
格式：WebP（回退為 JPEG）
品質：75%（兼顧畫質與載入速度）

部落格縮圖

長寬比：4:3
尺寸：800x600
格式：WebP
品質：80%
最佳化重點：主體內容清楚可見

卡片圖片

長寬比：3:2
尺寸：600x400
格式：WebP
品質：85%

攝影工作流程

從大圖擷取細節

載入高解析度圖片
- 原圖：6000x4000
- 目標：擷取局部細節
精準裁切
- 使用自由長寬比
- 放大畫面以便精確選取
- 將裁切區域對準感興趣的部分
最佳化輸出
- 保持較高品質（95%）
- 若原圖為 PNG，可保留原格式
- 依網頁使用情境縮小到合適尺寸

建立系列照片

統一長寬比
- 經典風格可用 4:3
- 現代展示可用 16:9
統一尺寸
- 4:3 系列可用 1200x900
- 16:9 系列可用 1200x675
統一品質標準
- 照片輸出使用 JPEG
- 展示或列印可用 90%
- 網頁相簿可用 80%

工作流程範例

批次處理多張圖片

準備階段

- 將來源圖片整理到同一資料夾
- 明確目標規格
- 設定統一命名規則

處理階段

- 載入第一張圖片
- 設定長寬比與輸出格式
- 設定品質與輸出尺寸
- 裁切並下載
- 對剩餘圖片重複相同步驟

品質檢查

- 檢查所有處理後的圖片
- 確認檔案大小是否合理
- 驗證尺寸是否一致
- 在目標應用中測試顯示效果

從同一張圖片建立多個版本

根據單張來源圖片建立多種版本：

版本 1：完整解析度

用途：高品質列印
設定：原始尺寸、PNG、100% 品質
裁切建議：盡量少裁，保留原始構圖

版本 2：網頁展示

用途：網站圖庫
設定：最長邊 1200px、JPEG、85% 品質
裁切建議：針對網頁瀏覽最佳化構圖

版本 3：縮圖

用途：預覽格線
設定：300x300、JPEG、75% 品質
裁切建議：聚焦主體

版本 4：行動端最佳化

用途：行動應用
設定：最長邊 800px、WebP、80% 品質
裁切建議：確保小螢幕上重要元素仍清楚可見

疑難排解範例

大檔案處理

問題：需要處理由 50MB RAW 檔轉出的圖片。
解決方案：

使用記憶體充足的瀏覽器
關閉其他分頁釋放資源
必要時先預處理檔案以減少體積
若工具支援，優先使用漸進式載入

品質與檔案大小的平衡

情境：想要較小檔案體積，同時維持良好畫質。

可測試的設定：

WebP 通常比 JPEG 小約 30%
75% 品質通常是較平衡的區間
依實際用途最佳化輸出尺寸
選擇合適長寬比，避免無意義像素

結果比較：

原始 JPEG (90%)：2.1MB
最佳化 JPEG (75%)：1.2MB
WebP (75%)：800KB
WebP (60%)：450KB

行動裝置相容性

挑戰：在手機或平板上處理圖片。

需要考量：

可用記憶體較少
透過觸控調整裁切框
處理速度通常較慢
下載與分享選項可能受限

最佳實務：

在行動端使用較小的來源圖片
稍微降低輸出品質以提升速度
測試觸控手勢是否方便調整裁切框
提供清楚的視覺回饋

整合範例

WordPress 外掛整合

// Example: Add crop functionality to WordPress media library
function add_image_cropper_to_media() {
    // Enqueue Image Cropper assets
    wp_enqueue_script('image-cropper', '/path/to/cropper.js');
    wp_enqueue_style('image-cropper', '/path/to/cropper.css');
}
add_action('admin_enqueue_scripts', 'add_image_cropper_to_media');

React 元件整合

import ImageCropper from "./ImageCropper";

function MyComponent() {
  const handleCropComplete = (result) => {
    // Handle cropped image
    console.log("Cropped image:", result);
  };

  return (
    <ImageCropper
      aspectRatio={1}
      outputFormat="jpeg"
      quality={85}
      onCropComplete={handleCropComplete}
    />
  );
}

電商平台整合

// Example: Shopify app integration
function setupProductImageCropper() {
  const cropper = new ImageCropper({
    container: "#product-image-editor",
    aspectRatio: 1,
    outputFormat: "jpeg",
    quality: 90,
    onCrop: (result) => {
      uploadProductImage(result.blob);
    },
  });
}

這個頁面對您有幫助嗎？

On this page

基礎範例進階範例工作流程範例疑難排解範例整合範例