圖片裁切

圖片裁切

此工具可直接在瀏覽器中裁切單張 PNG、JPEG 或 WebP 圖片。您可以拖曳或調整裁切框，選擇比例預設，或輸入精確的像素座標。

原始檔案會保留在您的裝置上。瀏覽器支援時，Canvas 匯出會保留 PNG、JPEG 或 WebP 格式；若不支援，則改用 PNG。

自由裁切適合任意選區；1:1、4:3、16:9 等比例預設適合社群預覽、縮圖和文件尺寸。

如何使用

1. 上傳一張 PNG、JPEG 或 WebP 圖片。
2. 拖曳裁切框、透過控制點調整大小、選擇比例預設，或輸入精確裁切值。
3. 調整 JPEG/WebP 品質，預覽輸出，然後下載裁切後的圖片。

何時裁切圖片

裁切圖片可去除多餘邊緣、突出主體，或符合卡片、縮圖和社群預覽所需的固定比例。

當設計稿或 CMS 需要特定像素裁切區域時，可以使用精確的數值欄位。

使用 Canvas 裁切

瀏覽器流程使用 Canvas drawImage 的來源座標：

const canvas = document.createElement('canvas');
canvas.width = crop.width;
canvas.height = crop.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
canvas.toBlob(saveBlob, outputMime, quality);

MCP 整合

MCP（Model Context Protocol，模型上下文協議）讓 AI 代理和應用可以探索並呼叫 Coding.Tools 工具，用於可重複的轉換、格式化、雜湊和產生工作流程。

MCP 工具名稱: image-crop

MCP 端點: https://coding.tools/mcp

請先呼叫 tools/list。每個工具項目都包含 inputSchema、outputSchema 和 examples，AI 代理或客戶端可據此建立有效參數，不需要猜測。

呼叫 tools/call 後，result.content[0].text 是顯示用結果，result.structuredContent 是適合程式解析的結構化結果。工具層級失敗會回傳 isError: true；協議層級失敗會回傳 JSON-RPC error。

tools/call 請求範例：

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"image-crop","arguments":{}}}'

這個圖片工具在 MCP 中屬於瀏覽器專用工具。tools/call 不會在伺服器處理本機圖片位元組，而是回傳 isError: true 和指向網頁介面的 resource_link。

大多數文字與資料工具接受 input 字串以及可選的 options。只依賴瀏覽器圖片 API 的圖片工具會用於探索，並在需要瀏覽器能力時返回網頁入口。