Image Cropper with Aspect Ratio Presets
A marketplace shot that must be square, a screenshot that has to fit a fixed thumbnail, and a group photo with a stranger at the edge all call for the same edit: cut the frame down to the part that matters. This cropper draws the image on an HTML canvas inside your browser, so the file is decoded locally and never reaches a server. Load a photo, pick a preset ratio or stay free, drag the box, and export PNG, JPEG, or WebP at the original pixel resolution. Pointer positions are measured on the scaled preview while the crop rectangle itself lives in natural pixels, which is why the output stays sharp.
Crop an Image in This Tab
Choose an image
PNG, JPEG, or WebP. The file is decoded at its natural size as soon as you pick it.
Ratio and crop box
Drag inside the box to move it, grab a corner handle to resize, and press Reset crop to select the whole frame again.
Cropped result
Download cropHow It Works
The file decodes into an Image object at its natural size, and the visible canvas draws that image scaled to fit a box no wider than 720 pixels and no taller than 480. The ratio between the two, written as displayScale = displayW / naturalW, is the only bridge between them: every pointer coordinate is divided by displayScale before it reaches the rectangle, so a box moved on a 720 pixel preview still resolves to whole pixels of the original. The crop itself reads the natural-resolution image rather than the preview, so the region you see is the region that gets encoded.
Each frame is drawn from scratch: the image first, then four filled rectangles that cover everything outside the box, a 2 pixel border, and small squares on the corners. One even-odd path would paint the same outside region in a single pass, and the rectangles are used because the four edges are trivial to reason about. The overlay lives in display coordinates while the stored rectangle stays in natural coordinates, and one helper multiplies between the two.
Pointer down tests in a fixed order: a point within 14 pixels of a corner starts a resize with the opposite corner pinned, a point inside the box starts a move, and anywhere else is ignored. During a move the pointer delta is added to the starting rectangle; during a resize the dragged corner sets the new width and height while the anchored corner stays put. Both paths end in clampRect against the natural bounds, which keeps the rectangle on the image at every step of the drag.
Changing the ratio select calls applyAspect with the south-east anchor, so the box keeps its corner while the far corner swings onto the new ratio, and Reset crop puts fullRect back over the whole image. The Crop image button builds an offscreen canvas at the rectangle width and height, copies those pixels out of the natural image, and encodes them with toBlob under the chosen MIME type. The preview canvas and the download link both come from that local blob.
Before and After
file: studio-shot.jpg
original: 4032 x 3024
ratio: free, no preset
summary: Crop 1187x1191 at 1443,812file: studio-shot.jpg
preset: Square 1:1
summary: Crop 3024x3024 at 504,0
output: cropped.png, 3024 x 3024preview: 720 x 540 shown
box read as: 120 x 120
crop taken at: 120 x 120 of 4032
result: sliver from the cornerdisplayScale: 0.1786 (720 / 4032)
box in natural px: 672 x 672
summary: Crop 672x672 at 0,0
result: full-strength regionUse Cases
| Developer | Production | Workflow |
|---|---|---|
| Trim a screenshot region before attaching it to an issue | Square a product photo for a listing grid | Crop first, then hand the file to the image resizer |
| Cut avatar regions from a sheet for seeded test data | Fit a headshot into a wide profile banner strip | PNG for screenshots, JPEG for photos, WebP for the web |
| Crop sprite frames out of an atlas for a demo build | Pull the useful part out of an event photo | Read the summary line to confirm exact output pixels |
| Strip the empty margin around a captured chart | Force the 16:9 frame a video thumbnail needs | Download with the format in the file name for sorting |
Common Mistakes and Troubleshooting
- Dragging a corner while a preset is on and expecting the ratio to hold. Corner drags follow the pointer and the rectangle is only clamped to the image, so reselect the preset afterwards to snap the box back onto the ratio.
- Reading the summary as preview pixels. Crop 640x480 at 0,0 reports natural pixels of the source file, not positions on the 720 pixel preview.
- Exporting a screenshot as JPEG. Fine text picks up soft edges around the letters, while PNG holds them exactly and WebP stays close in size.
- Treating the crop as a resize. Nothing scales during a crop, so a 1200 pixel region leaves as 1200 pixels and a smaller output needs the image resizer afterwards.
- Choosing a ratio after placing the box. The re-fit moves the far corner, which can push your subject off frame; pick the preset first and compose second.
- Pressing Crop image with no file loaded. The red line reports that an image is needed first, and it reappears with a decode message when the browser cannot read the file as PNG, JPEG, or WebP.
Best Practices
- Set the ratio before you compose, so the rectangle re-fits once instead of after you have already placed the subject.
- Match the format to the content: PNG for screenshots and logos, JPEG for photographs, WebP for images that ship on a page.
- Watch the summary line after each drag; it prints the exact rectangle the export will use.
- Crop at the original resolution and resize afterwards, because cutting first leaves every remaining pixel as the sensor captured it.
- Press Reset crop before a second pass on the same photo, so the previous rectangle does not carry into the next export.
Frequently Asked Questions
Does this cropper upload my photo anywhere?
No. The file is decoded into an Image object behind a local object URL, the crop runs on a canvas element, and the download comes from a blob. Nothing about the picture, its name, or its byte size travels to a server, so client mockups and personal photos stay on the machine.
Which aspect ratio should I use for Instagram, YouTube, and LinkedIn?
Instagram feeds favor square 1:1 posts and tall 4:5 crops, YouTube thumbnails want 16:9, and a LinkedIn banner is a wide strip near 4:1 that has no preset, so drag it in Free mode. Pick the preset before you place the box, because snapping a ratio re-fits the rectangle around its corner.
What is the difference between cropping and resizing?
Cropping discards pixels along the edges and copies the survivors untouched, so a 4000 by 3000 photo cropped to 1200 by 900 leaves as 1200 by 900 real pixels. Resizing scales every pixel in the frame, which shrinks detail or invents it on the way up. Crop the frame first, then hand the result to the image resizer when a smaller pixel size is still needed.
Can I crop a specific pixel region?
Yes, with the drag handles. The summary line prints the rectangle in natural pixels, for example Crop 640x480 at 0,0, so you can read coordinates back while you move the box. There are no numeric x and y fields, so for an offset that must land exactly, drag close and watch the summary until it reads the numbers you want.
Which output format should I pick after cropping?
PNG keeps hard edges and transparency, which suits screenshots, logos, and text-heavy graphics. JPEG suits photographs because gradients re-encode at a much smaller size. WebP gives the smallest files at a similar look and is read by every current browser, so it works well for images on a page.
Does cropping reduce image quality?
Not on its own. The pixels you keep are copied from the original at full resolution, and only the edges you cut are gone. Quality moves at export instead: PNG is lossless, while JPEG and WebP re-encode the crop and can soften fine lines, so leave them at their default setting for anything with sharp detail.
How do I crop a photo on my iPhone?
Open this page in Safari, tap the file button, and pick a photo from your library or from Files. Drag with one finger to move the box, tap a preset ratio, then press Crop image and keep the download the browser offers. The picture is decoded inside the tab, so it never gets sent anywhere.