Image Crop
Crop one image in the browser with a draggable selection, ratio presets, exact pixel coordinates, and JPEG/WebP quality control.
Click or drag an image file here
PNG, JPEG, WebP · Max 10MBWhat does Image Crop do?
Image Crop extracts a selected rectangular region from an image and exports the result.
- Primary use: Image Crop extracts a selected rectangular region from an image and exports the result.
- Key technical fact: Cropping changes composition and pixel dimensions without scaling the selected pixels unless an export size is applied.
- Practical check: Compare visual quality, pixel dimensions, metadata, and exported file size before publishing the processed image.
| Topic | Direct answer | Source |
|---|---|---|
| Direct answer | Image Crop extracts a selected rectangular region from an image and exports the result. | HTML Canvas API |
| Key fact | Cropping changes composition and pixel dimensions without scaling the selected pixels unless an export size is applied. | HTML Canvas API |
| Processing model | Runs locally in the browser; no production Node server receives the input. | Browser JavaScript |
Crop to the exact frame you need
Image Crop cuts out a selected rectangular area from a PNG, JPEG, or WebP image without uploading it. Use it to remove edges, center a subject, or match fixed card, thumbnail, avatar, and social preview ratios.
The crop box uses pixel coordinates: X and Y mark the top-left corner, while width and height define the selected area. Cropping changes composition and output dimensions; the selected pixels are exported at their chosen crop size.
Processing runs through the browser canvas. Free crop is best for arbitrary framing, while 1:1, 4:3, and 16:9 presets help when the destination requires a stable aspect ratio. Review the output because metadata and orientation handling can differ after re-encoding.
How to use
- Upload one PNG, JPEG, or WebP image.
- Drag the crop box, resize it from the handles, choose a ratio preset, or type exact crop values.
- Adjust JPEG/WebP quality, preview the output, then download the cropped image.
When should you crop an image?
Image Crop is for changing the frame of an image: remove empty margins, focus on the important subject, or fit an image into a fixed-ratio slot.
Use exact X, Y, width, and height values when a design spec or CMS asks for a precise pixel crop. JPEG/WebP exports can be quality-adjusted, while PNG is the safer choice when transparency must remain intact.
Crop with Canvas
Canvas cropping uses source coordinates and draws only the selected rectangle into the output 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 integration
MCP (Model Context Protocol) lets AI agents and apps discover and run Coding.Tools utilities for repeatable conversions, formatting, hashing, and generation workflows.
MCP tool name: image-crop
MCP endpoint: https://coding.tools/mcp
Call tools/list first. Each tool entry includes inputSchema, outputSchema, and examples so an AI agent or client can build valid arguments without guessing.
For tools/call, read result.content[0].text for the display value and result.structuredContent for machine parsing. Tool-level failures return isError: true; protocol failures return a JSON-RPC error.
Example tools/call request:
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":{}}}'
This image tool is browser-only in MCP. tools/call returns isError: true plus a resource_link to the web UI instead of processing local image bytes on the server.
Most text and data tools accept an input string plus optional options. Browser-only image tools are listed for discovery and return a web UI link when they need browser image APIs.