免費圖片裁剪工具

工作原理

裁剪完全在你的瀏覽器中使用 HTML5 Canvas API 完成——不上傳、沒有伺服器。你直接在 canvas 元素上拖出選區，應用裁剪時，瀏覽器內建的 2D 渲染引擎只讀取所選畫素，並將其重新編碼為 JPEG、PNG 或 WebP。

1. 1
   將圖片載入到記憶體

   你的檔案透過 URL.createObjectURL() 讀取，為瀏覽器提供一個本地 blob URL。HTMLImageElement 完全在瀏覽器標籤頁中解碼檔案——圖片資料絕不會離開你的裝置。
2. 2
   Pointer Events 驅動裁剪選區

   瀏覽器的 Pointer Events API（統一滑鼠、觸控和觸控筆輸入）追蹤畫布覆蓋層上的拖曳。在選區外按下會開始新的矩形；在選區內按下會移動它；在右下角附近按下會調整大小。可選的寬高比預設（1:1、16:9、4:3 等）會在拖曳時約束形狀。
3. 3
   Canvas 繪製即時預覽

   每次裁剪變化時，Canvas 2D 上下文會重繪圖片，在選區外應用深色遮罩，清除裁剪區域以原始保真度顯示圖片，併疊加三分法網格和青色的調整手柄。
4. 4
   toBlob() 編碼並輸出結果

   點選“裁剪”時，會按精確的裁剪尺寸建立一個新的離屏畫布。ctx.drawImage() 只複製所選矩形，canvas.toBlob() 按你選擇的品質使用瀏覽器原生的 JPEG、PNG 或 WebP 編碼器編碼結果。輸出以本地 blob URL 返回供下載。

相關工具