Cropping is the second-most-common image operation after resizing — useful for trimming unwanted edges, framing a subject, or producing a fixed-aspect output for an avatar / video thumbnail / social post. This tool runs entirely in your browser via Canvas, with drag handles and aspect-ratio presets.
How cropping works
The image renders in a flexible surface that scales to fit available width while preserving its source aspect ratio. The crop rectangle is overlaid on top — you drag inside to move it, drag the eight handles to resize. All math runs in source-pixel coordinates (the actual image dimensions), with display coordinates only used for input events.
When an aspect ratio is locked, every drag is followed by an aspect-correction step that adjusts width or height to match the target ratio while keeping the rectangle centred. The final output uses canvas.drawImage(source, sx, sy, sw, sh, 0, 0, dw, dh) where (sx, sy, sw, sh) is the source rectangle and (dw, dh) is the output canvas size — a 1:1 mapping with no resampling.
Aspect ratio presets
| Preset | Ratio | Common use |
|---|---|---|
| Free | any | Trimming dead space, custom shapes |
| 1:1 | square | Profile photos, Instagram square posts |
| 4:3 | classic | Old film cameras, monitors, basic cards |
| 3:2 | 35mm | DSLR / mirrorless camera native ratio |
| 16:9 | widescreen | Video thumbnails, modern monitors, hero banners |
| 9:16 | vertical | Stories, Reels, TikTok, mobile-first hero images |
Example: square avatar from a portrait
A 1200×1600 portrait shot. Pick 1:1, the rectangle initialises at 1200×1200 centred (max-square in the source). Drag it to position the subject’s face in the frame. Crop. Output is exactly 1200×1200 PNG/JPEG.
Example: 16:9 hero from a wide source
A 4000×2500 landscape shot, want a 16:9 hero banner. Pick 16:9, drag the rectangle to frame the subject, crop. Output preserves the full source resolution within the cropped region — no resampling, no quality loss beyond JPEG re-encoding.
Example: trimming whitespace around a screenshot
A screenshot of a UI panel surrounded by 50px of empty browser chrome. Pick Free, drag handles to tight-fit around the panel, crop. Output is exactly the panel pixels, in the source format.
When to combine with other tools
- Need a specific output size? Crop first, then run through the resizer.
- Need a different format? Crop first, then run through the format converter (or just rely on the cropper preserving source format).
- Need the cropped image to be smaller? Crop first, then through the compressor.
Common mistakes
Confusing crop with resize. Cropping selects a region of the source at full source resolution. Resizing changes the dimensions of the whole image. To shrink a cropped region, crop first, then resize.
Switching aspect ratio mid-crop expecting the rectangle to stay the same shape. Switching to a different ratio forces the rectangle to a new shape — width or height shrinks to match. The center is preserved but dimensions change.
Cropping a JPEG and expecting bit-exact output. Canvas re-encoding is lossy. If bit-exact crop matters (archival, legal), use jpegtran-style tools that operate on the JPEG bitstream directly.
Trying to drag handles outside the source bounds. The crop rectangle is clamped to source bounds — handles can’t pull past the source edges. To get a bigger output, you need a bigger source.
What this tool does not do
It doesn’t resize. The output dimensions equal the cropped region’s source-pixel dimensions. To shrink, use the image resizer.
It doesn’t rotate or flip. EXIF orientation is respected by createImageBitmap automatically; manual rotation isn’t supported.
It doesn’t batch-crop. One file at a time, since each crop is interactive.
It doesn’t upload anywhere. All cropping runs client-side via Canvas. To convert the cropped output to a different format, the image format converter is the follow-up; to compress it further, the image compressor drops the file size without changing dimensions.