Image Cropper — aspect ratio presets, free in your browser

Cropping on the web has been a single-call canvas operation since the original HTML5 spec shipped. The tool above wires up the three-step pipeline that every modern browser supports: decode the source file into an HTMLImageElement, copy a sub-rectangle of those pixels into an off-screen canvas with the 9-argument form of drawImage, then encode the canvas back to a file with canvas.toBlob. No part of the file leaves the tab.

The mathematically interesting step is the planning: given a source size and a target aspect ratio, how exactly should the crop rectangle land on the source? The primary formula uses the limiting axis. Compare the source width-to-height ratio with the target ratio:

src_aspect = source_width / source_height
if src_aspect >= target_aspect:
    crop_height = source_height
    crop_width  = round(crop_height * target_aspect)
else:
    crop_width  = source_width
    crop_height = round(crop_width / target_aspect)
crop_x = round((source_width  - crop_width)  / 2)
crop_y = round((source_height - crop_height) / 2)

A second, independent formula solves the same problem from the width-first side: assume the crop spans the entire source width, then shrink to height if the implied height would overflow the source. Both formulas produce the same integer width and height to within 1 px of rounding slack on every input the tool accepts. The Cross-check panel inside the calculator above shows both numbers side by side so you can verify they agree on your own image.

Free-form mode skips the aspect-ratio constraint. The four corner handles each move independently within the source bounds, with a minimum crop size of 8 × 8 px so the rectangle is always visible. When you switch back to an aspect preset, the current rectangle is reshaped around its existing centre so you don't lose your framing.

Encoding uses the same path the Image Resizer tool relies on: canvas.toBlob(callback, mime, quality). JPEG quality is fixed at 0.92 — high enough that re-encoded photos are visually indistinguishable from the source, low enough that the output file isn't larger than the input. PNG and WebP are lossless / near-lossless and ignore the quality argument. The source-rect and destination-rect dimensions in the drawImage call are identical, so no resampling happens — kept pixels reach the encoder unchanged.

Each preset chip on the tool maps to a fixed width-to-height ratio. The right column shows what the maximum centred crop looks like on a 4032 × 3024 phone photo for comparison.

• MDN — CanvasRenderingContext2D.drawImage (9-arg source-rect form)
• MDN — HTMLCanvasElement.toBlob (browser-native encoder)
• MDN — Pointer events (unified mouse / touch / pen handling)
• Adobe — The golden ratio definition (1 : 1.618)
• WHATWG HTML — accept attribute on file inputs

Canvas behaviour and ratio definitions were last cross-checked against the above sources on 2026-05-11. The page is reviewed twice a year and whenever the Canvas spec changes the toBlob / drawImage contract.