Crop Image
Crop Image extracts a pixel rectangle beginning at x,y and limited by the source's right and bottom edges. Coordinates default to zero and missing width/height fall back to source dimensions. Negative starting coordinates are not explicitly rejected, so canvas clipping can produce transparent areas or unintuitive results.
Runs locally — files stay on your deviceWhere is x=0, y=0?
At the decoded image's top-left corner.
Cropping selects a rectangular pixel region
The source rectangle and destination canvas determine which pixels remain. Content outside the selected bounds is omitted from the new PNG.
How it works
Enter start coordinates and dimensions. Output width/height are capped at remaining source bounds; a non-intersecting or non-positive result is rejected, then drawImage copies the region.
Key concepts
Coordinates refer to decoded pixels
EXIF orientation handling depends on browser decoding.
Crop is destructive in the derivative
Removed pixels are not present in the exported canvas PNG.
When to use it
- Extract an exact known pixel region.
- Remove outer framing.
- Prepare a local static PNG derivative.
When not to use it
- Do not expect a visual selection UI.
- Do not use negative coordinates without reviewing output.
- Do not assume crop preserves metadata or original encoding.
Worked examples
Top-left square
- Input
x 0, y 0, width 500, height 500- Expected output
500×500 PNG
The first square region is copied.
Beyond right edge
- Input
x near edge, width too large- Expected output
Width capped to remaining pixels
The crop stays inside the right boundary.
Outside image
- Input
x beyond width- Expected output
Error
The rectangle does not intersect.
Common mistakes
Using display CSS coordinates
Preview scaling differs from source pixels. Correction: Use original decoded dimensions.
Entering negative starts
Behavior can include blank transparent area. Correction: Use non-negative x and y.
Overwriting the original
The derivative discards context. Correction: Keep the source.
Best practices
- Confirm original dimensions.
- Use non-negative integer coordinates.
- Inspect all four crop edges.
Related operations and differences
Image Resizer
Choose Image Resizer when you need to resize images to exact dimensions locally.; use Crop Image specifically for crop.
Add Text Watermark to Image
Choose Add Text Watermark to Image when you need to place a text watermark in the lower-right corner.; use Crop Image specifically for crop.
Adjust Image Brightness
Choose Adjust Image Brightness when you need to increase or decrease image brightness.; use Crop Image specifically for crop.
Adjust Image Contrast
Choose Adjust Image Contrast when you need to increase or decrease image contrast.; use Crop Image specifically for crop.
Adjust Image Saturation
Choose Adjust Image Saturation when you need to control the intensity of image colors.; use Crop Image specifically for crop.
Flip Image Horizontally
Choose Flip Image Horizontally when you need to mirror an image from left to right.; use Crop Image specifically for crop.
Limitations and privacy
- Numeric fields only; no visual crop handles, aspect lock, rotation-aware UI, or metadata preservation.
- PNG output.
- Negative and fractional inputs are not comprehensively validated.
Selected images are decoded and processed locally in this browser.
Frequently asked questions
What is the coordinate origin?
Top-left.
Is the result PNG?
Yes.
Are oversized dimensions rejected?
They are capped at right/bottom bounds.
Is there a visual selection box?
No.