圖片裁切工具

裁切就是從一張圖片中切出一個矩形區域，把框外的內容全部丟掉。這是最古老的編輯操作之一，因為它改變構圖卻不重新取樣像素——從 4000×3000 的相片裡裁出 1000×800 區域，框內的原始像素一個都不少。本頁面的裁切方式跟桌面編輯器一樣：在預覽圖上拖曳選框、在 X/Y/W/H 輸入欄裡鍵入精確數值、需要符合固定畫布（頭貼、橫幅、證件照）時鎖定比例，最後匯出 PNG/JPEG/WebP。旋轉與翻轉會在裁切之後施加，所以儲存下來的檔案本身就帶著你想要的方向——這對列印與不讀取 EXIF 方向標籤的 app 來說很重要。所有處理都透過 Canvas 在瀏覽器內完成——圖片位元組從不離開頁面，證件與個人相片始終留在你的裝置上。

裁切的邏輯很單純——選一個矩形、複製它的像素、把其他全部丟掉——但在瀏覽器裡要做得好，得處理幾個關鍵環節：螢幕上的預覽是原圖的縮放版本、拖曳控點操作的是顯示座標，而真正的裁切必須在原圖座標中進行，才不會損失畫質。 當你載入一個檔案，工具會先用 URL.createObjectURL() 拿到 blob URL，再交給 HTMLImageElement 解碼（零拷貝，比 base64 data URL 省記憶體）。img.naturalWidth 與 naturalHeight 成為標準座標系——state 裡存的所有 X/Y/W/H 都以這些像素表示。預覽用的 <img> 透過 max-width/max-height 讓瀏覽器自動縮放；每次載入和 resize 時用 getBoundingClientRect() 量出實際渲染寬，並存下 displayScale 比例（渲染寬/自然寬）。拖曳期間的滑鼠位移除以這個比例，就能把顯示端的動作換算回原圖像素——不論圖片在螢幕上被縮小到什麼程度，裁切矩形始終精準。 裁切框本身是疊在圖片上的絕對定位 <div>。8 個縮放控點（四角 + 四邊）各自在 pointerdown 時帶上一個模式（'nw'、'n'、'ne'、'e'、'se'、's'、'sw'、'w'、'move'）；window 上的 pointermove 監聽（pointer events 同時覆蓋滑鼠和觸控）器讀取即時滑鼠位置、計算與拖曳起點的差值、轉成原圖像素後重新算出矩形的 left/top/right/bottom。角點拖曳以對角為錨點；邊拖曳則保持垂直中軸不動；鎖比例的拖曳先算主導軸再反推另一軸。每次結果都會被夾在圖片範圍內、最小邊長 10 px，防止矩形反轉或飛出畫布。 匯出階段會用兩個離螢幕的 canvas。第一個 canvas 尺寸設為裁切區域的自然寬高；ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) 用 9 參數形式只取出裁切區域——Chromium 與 Firefox 都會透過 GPU 紋理拷貝完成，只要目標尺寸沒變就不會重新取樣。如果需要旋轉或翻轉，第二個 canvas 會按旋轉後的尺寸建立（90°/270° 時寬高互換），context 平移到中心、ctx.rotate(angle) 與 ctx.scale(±1, ±1) 施加變換，再把裁切後的 canvas 以 (-w/2, -h/2) 為偏移繪上去。最後 canvas.toBlob(mimeType, quality) 把編碼後的位元組以 Blob 回傳；URL.createObjectURL() 把它變成可下載的 URL。PNG 無視 quality（無損），JPEG 與 WebP 則把 quality 當成編碼器提示（0–1）。新的裁切產生時會 revokeObjectURL 舊的 Blob URL，避免已解碼的像素資料一直留在記憶體裡。

• 裁切座標（X/Y/W/H）基於原圖像素——一張 4000 像素寬的照片即使螢幕上縮小顯示，座標仍然按 4000 計算。
• 所有處理透過 Canvas API 在瀏覽器本機完成——解碼、裁切、旋轉、翻轉和編碼都不會將圖片位元組傳送到任何伺服器。
• 裁切框是一個絕對定位的 <div>，帶 8 個拖曳手柄；滑鼠/觸控偏移量除以顯示比例，轉換回原始像素座標。
• 匯出使用離屏 Canvas：第一個 Canvas 透過 drawImage 九參數形式只提取裁切區域（不重新取樣），第二個 Canvas 透過 context 變換施加旋轉/翻轉。
• 每次狀態轉換時明確釋放舊的 Blob URL，避免已解碼的像素資料在記憶體中堆積。