Crop an Image by Dragging, or by Typing Exact Coordinates
Select the area you want to keep on a live preview, or set the crop box numerically to the pixel.
About the Image Cropper
Load a picture and it appears as a preview you can drag across. The area you select stays bright while everything outside it dims, with a coloured outline marking the boundary, so the framing is obvious before you commit. Four number fields show the crop box as X, Y, width and height, and they stay in sync in both directions: dragging updates the numbers, and typing into the numbers redraws the box.
That dual control matters when a crop has to be exact rather than approximate — matching a required banner size, or trimming precisely to the edge of a table in a scan. The important behaviour to understand is that cropping genuinely discards the pixels outside the selection; they are not covered over or hidden in metadata, they are absent from the exported file. For anyone removing sensitive detail from an image before sharing it, that distinction is the whole point.
Key Features
- Drag to select: Pull a box across the preview and the area outside it dims so the framing reads clearly.
- Numeric precision: X, Y, width and height boxes let you set the crop to an exact pixel instead of eyeballing it.
- Two-way syncing: Dragging updates the number fields and editing the numbers moves the box on the preview.
- Coordinates in real pixels: The values refer to the full-size original, not the scaled preview, so a typed crop lands where you expect.
- Format and quality control: Export as PNG, JPG or WebP, with a quality slider for the lossy formats.
How to Use the Image Cropper
- Add the image you want to trim.
- Drag across the preview to draw the area you want to keep.
- Fine-tune with the X, Y, width and height fields if the crop needs to be exact.
- Choose an output format, then crop and download the result.
How It Works
The crop is a single Canvas operation: the source image is drawn into a new canvas using the selection as the source rectangle, producing an output exactly the width and height you specified, then encoded with canvas.toBlob. No library is involved. The preview is scaled to fit roughly 780 pixels across, and the selection is converted back to original-image coordinates before the crop runs, which is why the numbers can exceed the preview size. There is no aspect-ratio lock, so a square or 16:9 crop has to be entered in the width and height fields.
When You Need It
Support engineers attach screenshots to tickets constantly, and a raw screenshot often includes a browser tab with a customer name, an account number in a sidebar, or a colleague in a chat window. Cropping to the error message alone removes that data from the file rather than obscuring it, which matters because a drawn black rectangle can sometimes be undone while deleted pixels cannot. Journalists trimming an identifying background out of a photograph, and estate agents removing a neighbour from a listing shot, rely on the same permanence.