做動漫週邊圖鑑的時候遇到一個小麻煩：很多商品的官方圖片是一整排角色的合照，要在圖鑑裡只顯示其中一個角色，就得替每張圖片記下裁切範圍。一開始是用小畫家看座標再手動換算成百分比，做了幾張就受不了，於是寫了這個工具。

👉 網址：https://www.miwa23333.xyz/image-crop-preview/

使用方式

  1. Upload：選擇一張本機圖片。圖片只會在你的瀏覽器裡處理，不會上傳到任何伺服器。
  2. Coordinates：在圖片上拖拉出想要的範圍，右側會即時顯示兩種格式的座標，各有一個 Copy 按鈕：
    • Normalized %：x1, y1, x2, y2，以圖片寬高的百分比表示左上角與右下角，保留兩位小數。這種格式不受圖片實際尺寸影響，換成不同解析度的同一張圖也能用。
    • Pixels：x, y, width, height，實際像素座標。
  3. Preview：下方會顯示裁切後的預覽。

裁切框沒有固定長寬比，可以自由拖拉，也可以在圖片上重新框選。

技術小記

整個工具就是一個 HTML 檔，用 Cropper.js 處理拖拉與座標計算，百分比座標是把 Cropper 回傳的像素值除以圖片的原始寬高再乘上 100。原始碼在 GitHub。

雖然是為了圖鑑做的，但任何需要「量出圖片某個區域座標」的情境都能用，例如替 CSS 的 object-position、clip-path 或圖片切割程式準備參數。