跳到主要內容

裁切圖片

在瀏覽器本機裁切圖片:拖曳選取框、拉角調整,一鍵輸出裁好的 PNG 或 JPG。

裁切框顯示的是原圖像素,不是螢幕像素

把 1200 × 800 的測試照片載入裁切工具。

輸入
public/lab/corpus/photo.png(1200 × 800,可在 /lab/ 下載)
輸出
source            1200 × 800 px
displayed at      620 × 413
default crop box  720 × 480 px
output format     image/png

圖片為了塞進版面被顯示成 620 × 413,但裁切框讀出來是 720 × 480 px —— 因為框在裁切前會換算回原圖的像素網格。這個區別很重要:如果框顯示的是螢幕像素,你會靜靜地得到一張比你要求的更小的圖。輸出預設是 PNG,所以裁照片會無損但很大;照片建議改成 JPG。

什麼是裁切圖片工具?

這個裁切圖片工具讓你把圖片多餘的部分切掉,只留下想要的範圍:上傳後拖曳選取框移動、拉四角改大小,按下按鈕就以原始解析度輸出裁好的 PNG 或 JPG。全程在你的瀏覽器本機完成,圖片不會上傳。

如何使用

  1. 把圖片拖進上傳區,或點擊選擇檔案。
  2. 拖曳中央的選取框移動位置,拉動四個角調整大小。
  3. 選擇輸出格式(PNG / JPG),按「裁切並下載」。

使用情境

  • 把截圖多餘的邊、瀏覽器工具列切掉,只留重點。
  • 裁出正方形大頭貼、社群封面的重點區。
  • 裁完想再縮檔或轉格式?用 壓縮圖片 或 調整尺寸。

裁切、縮放、壓縮:別搞混了

「圖片太大」其實有三個完全不同的意思,對應三種工具,弄混只會白忙。裁切(crop)是切掉畫面外圍、改變構圖與長寬,像素不會被拉伸——切完那 800×600 的圖若你只框了中間,輸出可能是 400×300。縮放尺寸(resize)是保留整張畫面、把像素等比例縮小,例如 4000×3000 縮成 1200×900。壓縮(compress)則是尺寸不動、只降低檔案的資料量(多半調 JPG 品質)。想「只留重點」用裁切;想「同樣畫面但檔案小一點」用調整尺寸或壓縮。另外要記得:本工具以原始解析度裁切,不是裁你螢幕上看到的縮圖,所以框很小的一塊、輸出仍是清晰的原生像素;唯有選 JPG 輸出才會多一層壓縮,要無損就選 PNG。

我拖的那個框,實際是多少像素?

不是你在畫面上看到的那個數字 —— 框會按顯示比例換算回原圖像素。我們載入測試語料庫那張 620 × 413 的照片,讀出預設框是 720 × 480 px,輸出格式 image/png。這才是要盯的值:一個在縮小預覽上看起來很大方的框,換算回去仍然可能低於你的目標所需 —— 而裁切不可能把像素加回來。

常見問題

裁切後畫質會變差嗎?

不會。工具以圖片的原始解析度裁切輸出,不是裁「你螢幕上看到的縮圖」。若選 JPG 才會有壓縮;想完全無損選 PNG。

圖片會上傳嗎?

不會。上傳、裁切、輸出全都在你的瀏覽器本機完成,不會傳送任何檔案到伺服器。

PNG 和 JPG 該選哪個?

含透明背景、或想無損保留(截圖、圖示、線稿)選 PNG;照片、想要更小檔案選 JPG。詳見圖片格式指南。

可以裁成固定比例(如 1:1)嗎?

目前是自由裁切,你可以手動把選取框拉成想要的形狀。若只要正方形大頭貼,把四邊拉成等長即可。

延伸閱讀

如何裁切圖片(而且不失真) →

嵌入此工具

把這個工具免費放進你的網站或部落格 —— 複製下面的程式碼貼上即可(內含一條回到本站的連結)。