RevealTheme logo

Image Cropper

Crop an image to exact pixel coordinates by typing X/Y offset and width/height. Everything runs locally in your browser using an HTML canvas.

How to use this tool

  1. 1

    Click the file picker and choose an image (PNG, JPEG, WebP, GIF, or any format your browser can decode).

  2. 2

    Read the displayed source dimensions, then type the crop X/Y offset and W/H size in pixels into the four number fields.

  3. 3

    Click Crop to draw the selected region onto a canvas and preview the result.

  4. 4

    Click Download to save the cropped image as a PNG file.

What does cropping by pixel coordinates actually do?

Cropping cuts a rectangular region out of an image and discards everything outside it. This tool defines that rectangle with four numbers: X and Y are the offset in pixels from the top-left corner of the source image to the top-left corner of the crop, and W and H are the width and height of the region you want to keep. When you click Crop, the tool creates an off-screen canvas sized W by H and calls the canvas drawImage method, copying the source pixels from (X, Y) spanning W by H into the new canvas at (0, 0). The result is read back with toDataURL, so the output is always a PNG regardless of the format you loaded. Because the coordinate system is in real image pixels, not CSS or display pixels, a 4000-pixel-wide photo shown small on screen is still cropped against its full 4000-pixel grid. There is no drag-to-select rectangle, no aspect-ratio lock, and no rotation here, so this tool is best when you already know the exact numbers you need, such as matching a fixed avatar or banner size.

Common use cases

  • Trim a screenshot down to a single UI panel by reading the pixel coordinates from a design tool and typing them in.

  • Produce a square avatar by setting equal W and H and centering the X/Y offset on a face.

  • Cut a fixed-size banner or ad slot (for example 728x90) from a larger source image.

  • Crop the same region from a batch of identically framed images using one set of remembered coordinates.

  • Remove an unwanted border or watermark strip by offsetting X/Y past it and shrinking W/H.

  • Extract a sprite or icon from a sprite sheet whose cell coordinates you already know.

Frequently asked questions

Are my images uploaded to a server?
No. The image is read with a local object URL and cropped on an in-memory HTML canvas in your browser. Nothing is sent over the network, so the tool works offline once the page has loaded.
What happens if my crop is larger than the image or goes past its edge?
The output canvas is still exactly the W by H you specify, but only the pixels that actually exist in the source get drawn. Any area beyond the image bounds is left as transparent (PNG alpha), so you may see empty edges rather than an error.
What format is the downloaded file?
Always PNG. The tool calls toDataURL('image/png') on the canvas, so even if you load a JPEG or WebP, the saved crop is a lossless PNG. This can make the file larger than the original JPEG.
Does it preserve transparency from the source?
Yes. The canvas keeps the alpha channel, and PNG output supports transparency, so transparent regions in a source PNG or WebP stay transparent in the crop.
Why are X/Y/W/H in pixels and not percentages?
The values map directly to the source image's intrinsic pixel grid, so they are exact and reproducible. The on-screen size of the image does not affect them; a value of 100 always means 100 real image pixels.
Can I drag a selection box or lock an aspect ratio?
Not in this tool. Cropping is driven entirely by the four number fields, so you set the rectangle by typing values. If you need interactive drag-selection, rotation, or zoom, use a fuller editor such as a dedicated image app.
Does cropping reduce quality?
No resampling happens. The selected pixels are copied 1:1 into the output at the same resolution, so there is no scaling or blurring; you simply keep fewer pixels than the original.

Related tools