What this tool does
Image Crop exports a rectangular region from one image. Default aspect is Free. Default output is Original format at quality 90.
When to choose it instead of a similar DevToolKit tool
- Use Crop to discard edges or reframe.
- Use Resizer to change the whole image’s pixel size without choosing a region.
- Use Rotate if the problem is orientation, not framing.
Typical jobs this page is built for
- Cut a square 1:1 from a photo for a profile crop.
- Frame a 16:9 banner or a 9:16 story from a larger still.
- Type x/y/width/height when you already know the pixel box.
Supported inputs, limits, and output behavior
- Input
- JPG, PNG, or WebP, 20 MB.
- MAX_DIMENSION
- 12000 px warning only.
- Output
- {base}-cropped.jpg|.png|.webp
How the transformation actually works
readCropData uses cropper.getData(true). Export uses imageSmoothingQuality high. PNG skips the quality argument; JPEG/WebP use quality/100.
Step-by-step workflow
- Upload one image.
- Adjust the crop box.
- Pick an aspect preset if you need a fixed ratio.
- Pick output format (and quality for JPG/WebP).
- Click Crop image.
- Download {base}-cropped.{ext} and check the pixel size.
What can change in the output
The result is a new encoding of the cropped canvas, not a lossless crop of a JPEG MCU grid. Metadata is not copied by toBlob.
Known limitations and failure cases
- Very large images can be slow.
- CROP_EXPORT_FAILED if the canvas blob is empty.
- AVIF/HEIC not accepted.
Privacy / where data goes
Cropper.js and canvas export run in the browser. The image is not posted to a crop API. Identified analytics may include byte counts and output dimensions, not the pixel contents.
Practical output-review checklist
- Confirm width×height match the pixel fields from readCropData.
- Check JPEG white flatten on transparent PNG crops.
- Inspect edges after wheel zoom; export uses the crop box, not the on-screen zoom alone.
- Keep the original uncropped file.