瀏覽器端圖片裁剪的運作方式
裁剪過程完全在您的瀏覽器分頁中使用 Canvas API 執行。無需伺服器端處理、無需上傳、無需第三方服務。每一步都在您的裝置上完成。
- 將圖片載入到
<img>元素，讓瀏覽器在本機解碼。畫布疊加層將圖片縮放以適應檢視區域，同時一個可拖曳的選取矩形顯示當前裁剪範圍。 - 透過拖曳矩形的邊或角來調整裁剪範圍。矩形始終被限制在圖片邊界內，因此無法選取超出圖片的區域。當固定長寬比生效時（1:1、16:9、4:3），調整大小會自動保持該比例。
- 像素讀數在您拖曳時即時更新，以圖片像素座標顯示當前的裁剪寬度、高度、X 和 Y 位置。這讓您無需猜測即可設定精確的尺寸。
- 當您點擊「裁剪並下載」時，頁面僅將來源圖片的選取區域繪製到離屏畫布上保持原始像素解析度，然後透過
canvas.toBlob()以來源檔案相同的格式匯出結果，並產生用於下載的 Blob URL。
為什麼要線上裁剪圖片？
- 裁剪可以去除不需要的邊緣、空白區域或視覺雜亂。一次簡單的裁剪往往比任何濾鏡或色彩調整更能改善照片構圖。
- 長寬比控制對發佈平台至關重要。社交媒體動態期望 1:1 用於頭像、16:9 用於影片縮圖、4:3 用於標準攝影。裁剪到正確的比例可避免上傳時出現尷尬的黑邊或裁切不當。
- 用戶端裁剪是缺乏圖片編輯器的受限公司裝置上的唯一選擇。因為不上傳任何內容，所以沒有資料外洩風險，敏感影像也無需合規審查。
- 即時尺寸讀數消除了猜測。您可以在拖曳時看到像素座標和選取大小，因此無需切換到像素測量工具即可裁剪到精確的寬度和高度。
常見裁剪應用場景
裁剪是網頁發佈、社交媒體和軟體開發中最常見的圖片編輯之一。以下三種模式中瀏覽器端裁剪器可以節省時間。
- 為線上商店準備產品照片。裁剪為統一的 1:1 或 4:5 長寬比，使每個列表縮圖在網格中對齊。匯出保留原始格式，因此 JPEG 產品照片保持為 JPEG。
- 為文件或錯誤報告裁剪截圖。在將圖片附加到工單或拉取請求之前，裁剪掉瀏覽器工具列、Windows 工作列或敏感通知。
- 為登陸頁面裁剪主圖或橫幅。鎖定 16:9 預設，將照片最重要的部分定位在裁剪框中央，並以原始解析度匯出以在 retina 顯示器上獲得最佳品質。
實例：將 4000×3000 照片裁剪為 1200×675 的主橫幅
數位相機拍攝的 4000×3000 像素照片對典型的網頁主橫幅來說太大了。橫幅空間可能是 1200×675（一個 16:9 畫框）。
將照片拖入上傳區域。圖片以全解析度載入，但會縮放以適應檢視區域以便舒適的拖曳操作。選擇 16:9 長寬比預設。裁剪框立即自動貼合到適合圖片的最大 16:9 區域。拖曳矩形將焦點——一個山峰、一件產品或一張人臉——定位到畫框中。即時讀數顯示目前選取範圍為 4000×2250（全圖 16:9 視窗）。抓住一個角手柄向內拖曳，直到寬度讀數達到 1200 像素。高度因比例鎖定而自動跟隨。點擊 裁剪並下載。頁面從原始像素中提取選取的 1200×675 區域，並以來源格式輸出裁剪後的檔案。整個過程只需一兩秒，除初始頁面載入外不使用任何網路頻寬。
支援哪些圖片格式進行裁剪？
本工具接受瀏覽器可以解碼的任何格式：PNG、JPEG 和 WebP 涵蓋了幾乎所有實際應用場景。裁剪後的輸出以來源檔案相同的格式儲存。PNG 保持無損、JPEG 保留原始品質等級、WebP 保持為 WebP。格式透過來源檔案的 MIME 類型檢測。
裁剪會減少圖片檔案大小嗎？
裁剪會移除像素，因此輸出檔案的大小通常小於來源檔案，尤其是當您裁剪掉較大的邊框或空白區域時。匯出使用原始檔案格式及其編碼參數——PNG 保持無損、JPEG 保留其原始品質設定——因此唯一的節省來自像素減少而非重新壓縮。
長寬比預設有什麼作用？
預設（1:1、16:9、4:3、3:2、9:16）鎖定裁剪框的長寬比。當預設生效時，拖曳任何角或邊緣手柄會在保持比例不變的同時調整選取範圍大小。切換到自由模式會解除限制，讓您可以任意調整矩形大小。比例在圖片像素座標上強制執行，因此匯出的輸出具有您選擇的精確長寬比。
圖片會上傳到伺服器嗎？
不會。圖片永遠不會離開您的裝置。頁面使用瀏覽器的 File API 將圖片讀入記憶體，並使用 Canvas API 裁剪和匯出結果。您可以開啟瀏覽器的 DevTools 網路面板來驗證——裁剪過程中唯一的出站請求是初始頁面載入和廣告呼叫。沒有影像資料被傳輸。
我可以輸入精確像素座標來裁剪特定區域嗎？
目前版本透過圖片預覽上的拖曳互動來調整裁剪框。您可以讀取選取範圍 X、Y、寬度和高度的即時像素座標。v1 版本暫不支援直接數值輸入裁剪框，但計劃在未來的更新中加入此功能。
原始圖片會怎樣？
原始檔案始終保留在您的裝置上。頁面將其讀入瀏覽器記憶體用於顯示和裁剪，但永遠不會修改磁碟上的來源檔案。裁剪後的輸出是一個新檔案，需要單獨下載。原始檔案在您電腦或手機上的原始位置保持不變。
裁剪是否有檔案大小限制？
該工具在上傳區域設定了每檔案 30 MB 的限制，以在低階裝置上控制瀏覽器記憶體。如果您的圖片大於 30 MB，您可以先使用專門的圖片調整大小工具進行縮小，然後再載入到這裡進行裁剪。
裁剪功能在手機和平板上能用嗎？
可以。裁剪手柄的大小考慮了觸控目標，互動使用指標事件，支援滑鼠點擊和手指點擊。在手機螢幕上，圖片預覽會適應可用寬度，控制項垂直堆疊以便單手操作。