Overview
Introduction
This tool extracts an exact rectangular region from a PNG, entirely in your browser, by pixel coordinates.
It's the fundamental crop operation the site's cutter tool also builds on internally.
What Is PNG Cropper?
A client-side cropping tool that reads an uploaded PNG's pixel data and copies out a rectangular sub-region defined by a top-left (x, y) coordinate and a width and height, discarding everything else.
The cropped result keeps the exact original pixel data within that rectangle, with no scaling or resampling involved.
How PNG Cropper Works
The tool validates that the requested rectangle (x, y, width, height) lies entirely within the source image's dimensions, then copies each pixel from that region into a new, smaller output buffer at the corresponding relative position.
Because there's no resampling step, the cropped output is pixel-identical to the corresponding region of the source image.
When To Use PNG Cropper
Use it whenever you need a specific rectangular portion of a larger image, like isolating one icon from a sprite sheet or removing unwanted borders.
It's also the building block the cutter tool uses internally to slice an image into two pieces.
Often used alongside PNG Cutter, PNG Resizer and PNG Canvas Size Changer.
Features
Advantages
- Runs entirely client-side; the uploaded image is never sent to a server.
- Produces pixel-perfect results with no resampling loss, unlike a resize.
- Exact numeric coordinate control for precise, repeatable crops.
Limitations
- Requires knowing exact pixel coordinates ahead of time; there's no visual click-and-drag selection in this simple version.
- Rejects any rectangle that extends past the source image's bounds rather than clipping or padding it automatically.
Examples
Best Practices & Notes
Best Practices
- Check the source image's exact dimensions first (with the dimensions finder or viewer) before calculating crop coordinates.
- If you need to remove a symmetric border, subtract the border width from each side when computing width/height.
Developer Notes
The lib function does a straightforward bounds-checked pixel copy using the shared getPixel/setPixel helpers rather than a canvas-level getImageData call, keeping it testable under Node; png-cutter.ts imports and reuses this exact function twice (for each half of a cut) rather than reimplementing rectangle extraction.
PNG Cropper Use Cases
- Isolating a single icon from a sprite sheet
- Removing an unwanted border or margin from a screenshot
- Extracting a specific region of interest from a larger image
Common Mistakes
- Miscalculating the crop rectangle so it extends past the image bounds, which the tool rejects rather than silently correcting.
- Expecting the remaining content to be scaled up to fill a larger canvas — cropping only removes pixels, it never resizes what's left.
Tips
- Use the viewer tool first to confirm exact source dimensions before planning crop coordinates.
- For a simple two-piece split rather than an arbitrary rectangle, the cutter tool is a more direct fit.