✂️ 圖片裁切工具 (Image Crop Tool)

一個簡單易用的線上圖片裁切工具，支援拖拉調整裁切區域、自訂輸出尺寸與格式。

A simple and user-friendly online image cropping tool with drag-and-drop support, customizable output size, and format options.

功能特色 (Features)

• 📤 拖拉上傳：支援拖拉或點擊上傳圖片
• 🌐 網址載入：可直接輸入圖片網址載入
• 🎯 互動裁切：直覺的拖拉與縮放操作
• 📏 自訂尺寸：可設定精確的輸出寬高（像素）
• 🖼️ 輸出格式：支援 PNG、JPEG 輸出
• 📐 DPI 設定：可調整輸出圖片的 DPI（72 DPI, 96 DPI）
• 🌍 多語系：自動偵測瀏覽器語言（支援繁體中文、英文）
• 📱 響應式設計：支援桌面與行動裝置
• ⚠️ 尺寸警示：當圖片小於裁切尺寸時會顯示警告

快速開始 (Quick Start)

在瀏覽器直接開啟 index.html 檔案即可使用

使用說明 (How to Use)

1. 上傳圖片

   • 點擊「選擇圖片」按鈕
   • 或直接拖拉圖片到上傳區域
   • 或輸入圖片網址後點擊「從網址載入」

2. 調整裁切區域

   • 在藍色框內按住滑鼠拖動來移動裁切框
   • 拖動右下角的藍色圓點來縮放裁切框
   • 或在右側設定面板輸入精確的寬度/高度

3. 設定輸出選項

   • 裁切尺寸：設定輸出圖片的寬度和高度（像素）
   • DPI 設定：調整圖片解析度（72 DPI, 96 DPI）
   • 輸出格式：選擇 PNG 或 JPEG 格式

4. 下載圖片

   • 點擊「下載裁切後的圖片」按鈕
   • 圖片會自動以設定的格式下載

技術架構 (Tech Stack)

• 前端框架：純 HTML + CSS + JavaScript（無需建置工具）
• UI 框架：Tailwind CSS (Browser CDN)
• Canvas API：用於圖片處理與裁切
• 響應式設計：使用 Flexbox 與 Grid 佈局

多語系支援 (i18n)

工具會自動偵測瀏覽器語言設定：

• 🇹🇼 繁體中文 (zh-TW)
• 🇺🇸 英文 (en)

瀏覽器支援 (Browser Support)

• ✅ Chrome / Edge (推薦)
• ✅ Firefox
• ✅ Safari
• ✅ Opera

需要支援 HTML5 Canvas API 的現代瀏覽器

---

相關連結 (Links)

• GitHub Repository
• Demo

---

如有任何問題或建議，歡迎開 Issue 或 Pull Request！

If you have any questions or suggestions, feel free to open an Issue or Pull Request!