圖片裁切
透過可拖曳的選擇、比例預設、精確的像素座標和 JPEG/WebP 品質控制在瀏覽器中裁剪一張影像。
點選或拖曳圖片檔案到此處
PNG、JPEG、WebP · 最大 10MB裁剪到您需要的確切框架
影像裁切從 PNG、JPEG 或 WebP 影像中剪下選定的矩形區域,無需上傳。 使用它來刪除邊緣、居中主題或符合固定卡片、縮圖、個人資料和社交預覽比例。
裁切框使用像素座標:X 和 Y 標記左上角,而寬度和高度定義所選區域。裁剪會改變成分和輸出尺寸;所選像素以其選擇的裁剪尺寸導出。
處理透過瀏覽器畫布進行。自由裁切最適合任意取景,而當目的地需要穩定的寬高比時,1:1、4:3 和 16:9 預設會有所幫助。檢查輸出,因為重新編碼後中繼資料和方向處理可能會有所不同。
如何使用
- 上傳一張 PNG、JPEG 或 WebP 影像。
- 拖曳裁剪框,透過手把調整其大小,選擇比例預設,或輸入精確的裁切值。
- 調整 JPEG/WebP 質量,預覽輸出,然後下載裁剪後的影像。
什麼時候該裁剪圖像?
圖片裁切 用於更改影像的框架:刪除空白邊距、聚焦於重要主題或將影像放入固定比例的槽中。
當設計規格或 CMS 要求精確的像素裁剪時,請使用精確的 X、Y、寬度和高度值。 JPEG/WebP 匯出可以進行品質調整,而當必須保持透明度不變時,PNG 是更安全的選擇。
使用 Canvas 裁切
畫布裁剪使用來源座標並僅將選定的矩形繪製到輸出畫布中:
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 錯誤。
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 的圖片工具會用於探索,並在需要瀏覽器能力時傳回網頁入口。