裁切

裁切圖片 圓形裁切

最佳化

壓縮圖片 去背景 AI 圖片放大器

編輯

調整圖片大小

轉換

其他

圖片轉 PDF

線上圖片裁切工具

支援 JPG、PNG、WebP、AVIF,可鎖定 1:1、16:9、9:16、4:5、3:2、4:3 等比例或輸入精確像素尺寸。

或將圖片拖到這裡

關於此工具

使用 Araluma 的圖片裁切工具,直接在瀏覽器中將任何圖片裁切成矩形區域,由 cropperjs v2 驅動。將 JPG、PNG、WebP 或 AVIF 檔案拖曳到頁面上,裁切畫布立即開啟。拖曳控制點調整選取範圍,鎖定比例(1:1、16:9、9:16、4:5、3:2、4:3 或 A4),或直接輸入像素尺寸,框架會自動對齊。即時讀數在下載前就顯示輸出尺寸,以來源圖片的真實像素為準。整個裁切過程中,圖片完全保留在您的裝置上,在 DevTools 的網路分頁中看不到任何外送圖片請求。PNG 和 WebP 輸出會保留原始透明度,JPG 輸出則將透明區域填為白色。每次匯出都會移除 EXIF 資料。這個工具適合需要快速、精確矩形裁切,且不想安裝軟體的使用者,每次處理一張圖片。

裁切圖片
裁切工具如何在瀏覽器中運作

裁切工具如何在瀏覽器中運作

圖片透過瀏覽器的 File API 直接開啟。沒有伺服器上傳,裝置外也不會儲存任何暫存副本。將裁切框拖曳到所需位置,從四角或邊緣調整大小,即時像素讀數會隨之更新。座標位於來源圖片的像素空間,因此顯示的數值就是輸出檔案的真實尺寸。在裁切過程中開啟 DevTools 並切換到網路分頁,不會出現任何外送的圖片請求。您拖入的檔案和您下載的檔案,在整個工作階段中都完整保留在裝置內。

裁切圖片
鎖定比例或輸入精確像素尺寸

鎖定比例或輸入精確像素尺寸

點擊比例晶片(1:1 正方形、16:9 寬螢幕、9:16 直式、4:5、3:2、4:3 或 A4),選取框會鎖定該比例。您可以自由拖曳框的位置,選擇要保留的部分。如需精確像素目標,在寬度和高度輸入欄位填寫數值,框架會自動調整對齊。輸出始終等於選取範圍在來源圖片中的像素大小。本工具不放大:如果選取框寬 600 像素,輸出檔案就是 600 像素寬。

裁切圖片
JPG 輸出會將透明區域填為白色

JPG 輸出會將透明區域填為白色

如果來源檔案含有透明區域(PNG、含 alpha 的 WebP 或含 alpha 的 AVIF),而您選擇 JPG 作為輸出格式,這些透明像素會被填為白色。JPG 沒有 alpha 通道,無法儲存透明資訊。如需保留透明度,請在完成畫面的格式選擇器選擇 PNG、WebP 或 AVIF。PNG 和 WebP 輸出原樣傳遞原始 alpha 通道。AVIF 也支援 alpha。格式選擇器會標註每個選項的特性,下載前即可看到取捨。

裁切圖片
用鍵盤精確移動選取框

用鍵盤精確移動選取框

按 Tab 鍵移動到裁切框,然後用方向鍵以每次一個像素的步距移動選取範圍。按住 Shift 加方向鍵,步距會增加到十個像素。這個鍵盤操作內建於 cropperjs v2,是原生功能,不是另外加上去的無障礙層。當您需要觸控板無法達到的次像素級視覺對齊,或是用純鍵盤環境工作時非常實用。選取範圍在行動裝置上也支援觸控:用兩指捏合縮放畫布,然後拖曳選取角來重新構圖。兩種情況都不需要切換額外模式。

裁切圖片
輸出格式:PNG、JPG、WebP 和 AVIF

輸出格式:PNG、JPG、WebP 和 AVIF

裁切後,在完成畫面選擇下載格式。PNG 是無損的,完整保留透明度。JPG 預設採用品質 0.9 的有損壓縮,大多數照片肉眼看不出與原始的差異。WebP 兼具無損和有損模式,也支援透明度。AVIF 透過 @jsquash/avif 函式庫以品質 0.9 編碼,在同等視覺品質下檔案最小,但工作階段中首次 AVIF 編碼需要一次性下載 870 KB 的 WASM 模組。預設輸出格式與輸入相同:PNG 輸入預設 PNG 輸出,JPG 輸入預設 JPG 輸出。完成畫面隨時可以更改。

裁切圖片
什麼時候該改用其他裁切工具

什麼時候該改用其他裁切工具

本工具只裁切矩形:正方形、橫式比例、直式比例和自訂像素尺寸。如需圓形裁切(透明圓角的頭像),請改用 Circle Crop。它共享相同的瀏覽器端處理流程,但輸出的是圓形 PNG。對於已預設固定尺寸的平台範本(Instagram 1080×1080、YouTube 縮圖 1280×720、Facebook 封面 1200×630),裁切家族中的預設頁面會以這些尺寸自動載入,不需要計算。如果只想轉換圖片格式而不裁切,請使用 Convert 工具,可輸出 PNG、JPG、WebP 或 AVIF。

如何將照片裁剪成圓形

  1. 上傳圖片

    將 JPG、PNG、WebP 或 AVIF 檔案拖曳到上傳區,或點擊瀏覽裝置中的檔案,裁切畫布會立即開啟。

  2. 設定裁切範圍

    點擊比例晶片(1:1、16:9、9:16、4:5、3:2、4:3 或 A4),或在寬度和高度輸入欄位填寫精確像素值。

  3. 確認輸出尺寸

    將裁切框拖曳到要保留的圖片區域,從四角或邊緣調整大小,即時讀數會顯示所需的輸出尺寸。

  4. 裁切並下載

    點擊裁切,在完成畫面選擇輸出格式(PNG、JPG、WebP 或 AVIF),將裁切後的檔案下載到裝置。

常見問題

如何在瀏覽器中裁切圖片?

將圖片拖曳到工具頁面,選取框會自動出現。拖曳邊角調整範圍,點擊比例晶片鎖定固定比例,或輸入寬高像素值。確認尺寸後點擊裁切並下載。整個過程在瀏覽器本機完成,不需安裝任何軟體。在現代裝置上,從上傳到下載通常不到十秒。

裁切時圖片會上傳到伺服器嗎?

不會。工具完全在瀏覽器中運作,圖片始終保留在您的裝置上。在 Chrome DevTools 的網路分頁中可以確認,裁切期間看不到任何外送的圖片請求。您拖入的檔案和下載的檔案都保留在裝置內。

可以鎖定比例裁切嗎?

可以。點擊 1:1、16:9、9:16、4:5、3:2、4:3 或 A4 比例晶片,選取框會鎖定該比例。您可以自由拖曳框的位置,比例維持不變。若要自由裁切,不鎖定任何比例即可,直接拖曳邊角自由調整。

JPG 輸出會影響透明背景嗎?

會。JPG 格式沒有 alpha 通道,透明區域會被填為白色。若需保留透明度,請在完成畫面選擇 PNG、WebP 或 AVIF 格式,三者都支援 alpha 通道,透明區域不受影響。

裁切後可以選擇輸出格式嗎?

可以。完成畫面提供 PNG、JPG、WebP 和 AVIF 四種格式可選。預設格式與輸入相同(JPG 輸入預設輸出 JPG)。AVIF 首次編碼需下載約 870 KB 的 WASM 模組,之後在同一工作階段中不再重複下載。

支援哪些圖片格式?

輸入支援 JPG、PNG、WebP、AVIF 和 GIF(僅擷取第一幀)。輸出支援 PNG、JPG、WebP 和 AVIF,不支援 GIF 輸出。不支援 HEIC、TIFF、SVG 或 RAW 格式,建議先用轉換工具轉為 JPG 或 PNG 再裁切。

詳細資訊

團隊關於工藝、格式以及一個好的圓形裁剪背後小決定的筆記。

cropperjs v2 的 Web Component 架構
本工具基於 cropperjs 2.1.1 版本,這是原始 cropperjs 函式庫的完全重寫。v2 版本將舊的建構式 API(new Cropper(img, { aspectRatio: 1 }))替換為 Web Components 架構。裁切畫布、選取覆蓋層和圖片元素都是透過瀏覽器的 CustomElementRegistry 註冊的自訂 HTML 元素。這表示 Shadow DOM 處理所有內部樣式:無需匯入獨立的 cropper.css 檔案,相比 v1 減少一個 Vite 資源請求。比例鎖定現在直接設定在選取元素上(cropperSelection.aspectRatio = 1),不在建構式中,因此可以在執行時改變比例,無需重新初始化整個裁切介面。函式庫在 jsDelivr CDN 的 content-length 標頭直接量測為 41 960 位元組原始大小、12 175 位元組 gzip 壓縮後。這 12 KB 每個工作階段支付一次,透過 Vite 區塊分割在所有預設裁切路由中共用。
座標在來源圖片像素空間的意義
當您在螢幕上拖曳裁切選取時,看到的座標位於來源圖片像素空間,而非 CSS 像素空間。這個區別對高 DPI 螢幕很重要:一支裝置像素比為 3× 的手機將寬 300 CSS 像素的圖片顯示為 900 真實像素,但選取座標反映 900 真實像素,而非 300 CSS。您下載的輸出檔案包含的像素數,等於選取矩形在來源圖片中所代表的像素數。裁切操作呼叫 cropperjs v2 API 中的 selection.$toCanvas(),這是一個非同步方法,回傳一個按選取像素大小的全新 HTMLCanvasElement。該畫布隨後傳遞給 canvas.toBlob() 處理 PNG、JPG 或 WebP,或傳遞給 @jsquash/avif 編碼器處理 AVIF。不插入放大步驟。如果選取為 800 像素寬,輸出就是 800 像素寬。社群平台預設(Instagram 1080×1080、YouTube 1280×720)只有在來源圖片包含足夠像素填滿選取時,才會以這些尺寸交付。
EXIF 資料在每次匯出時都會被移除
每次匯出都會移除 EXIF、IPTC、XMP 和 ICC 設定檔資料。這發生在畫布管線層級:瀏覽器將解碼後的圖片像素繪製到 HTMLCanvasElement,然後畫布編碼為新檔案。畫布沒有中繼資料容器概念,只儲存像素值和編碼參數。被移除的內容包含 GPS 座標、相機品牌和型號、鏡頭焦距、曝光設定、版權欄位和顏色設定檔標籤。sRGB 顏色設定檔實際上是畫布做出的假設:顏色透過瀏覽器顯示管線渲染並重新編碼,不附加任何設定檔。對大多數網路發布和社群媒體用途而言,移除 EXIF 是首選,因為 GPS 資料可能暴露使用者無意分享的位置資訊。對於顏色設定檔準確度至關重要的專業攝影工作流,請注意 ICC 設定檔忠實度未保留,交付印刷或出版應使用顏色管理匯出工具。
行動裝置的裁切體驗
選取範圍在行動裝置上完整支援觸控操作。用兩指捏合可以縮放畫布,讓您精確定位到圖片中的細節。拖曳選取的四個角,可以重新框選大小。比例晶片在小螢幕上也容易點擊,並列排版適合手指操作。在 iPhone Safari 上,建議的最大輸入檔案大小約 25 MB,桌面瀏覽器上約 100 MB。超過這些上限可能導致頁面無聲當機,因為 JavaScript 在解碼大圖時超出記憶體配額。若需要處理超大圖片,建議先在桌面端使用,或先用其他工具減小檔案大小。所有觸控手勢和鍵盤操作都不需要切換模式,自然並存。
AVIF 輸出的效能特性
AVIF 匯出使用 @jsquash/avif 2.1.1,預設品質設定為 0.9。編碼器在 WASM 中執行,首次載入為 870 KB。同一工作階段內第二次以後呼叫不會重新下載。它與 Convert 工具共享同一個區塊。在 Chromium 系瀏覽器中,暖機後的編碼大約 250 毫秒,但在 Firefox 上,同樣的圖片大約慢 4 倍(與 Convert 工具的 E2E 驗證相同的趨勢,docs/research/convert-e2e-2026-05-16.md)。對於 4000 像素寬的照片等大輸入,首次編碼可能耗時幾秒。如果不需要 AVIF,PNG 或 WebP 更快。如果需要同畫質下最小檔案,AVIF 是合適選擇。
矩形裁切的使用情境
本工具的設計定位是精確矩形裁切,適用於部落格封面圖、電子商務商品圖、簡報素材、社群媒體貼文圖、文件大頭照等場景。每次處理一張圖片,讓您專注在這次裁切的構圖選擇,而不是被批次選項分散注意力。不支援圓形、自由形狀或一次處理多張的批次模式。圓形裁切請使用 /circle-crop/ 的 Circle Crop 工具,它共享相同的瀏覽器端處理流程,但輸出圓形 PNG。各社群平台的固定尺寸範本(Instagram、YouTube、Facebook 等),請使用 Crop 家族中對應的預設頁面,這些頁面在開啟時就已經載入正確尺寸,免去手動換算。