Image Cropper
Choose an image, then drag a box over it to select the area you want to keep. Everything happens in your browser with the Canvas API — the image is never uploaded to a server.
Drag over the image below to select the area to crop.
Crop an image without uploading it anywhere
Dragging over the image records a selection box in displayed pixels — the size the image actually
takes up on your screen, which is usually smaller than its real
size. Before cutting the crop, this tool multiplies your
selection by the ratio of the image's real naturalWidth/naturalHeight to its
displayed size, then draws only that scaled region onto the
output canvas with ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh).
Skipping that scaling step is the most common bug in
homemade croppers — it makes the downloaded crop land in the
wrong spot or the wrong size, because it uses screen coordinates
against real pixel data.
Worked example
Say a photo has a real size of 1200 × 800 px but is shown on your screen at 600 px wide (so 400 px tall) — a scale factor of 2× in both directions. You drag a box from displayed position (100, 50) to (300, 200) — a 200×150 selection on screen. Multiplying by the 2× scale factor gives an actual source region starting at (200, 100) and running to (600, 400) — a 400×300 crop cut from the real, full-resolution image, matching exactly what you saw selected on screen.
Frequently asked questions
Does the cropped image match exactly what I dragged on screen?
Yes. Large images are usually shown smaller than their real pixel size, so the tool scales your on-screen selection by the ratio of the image's real (natural) dimensions to its displayed dimensions before cutting the final crop. If a 4000px-wide photo is displayed at 800px on your screen, your selection is multiplied by 5× in each direction — so you always get the pixels you actually saw and dragged over.
Is the image uploaded to crop it?
No. The crop is drawn directly from the loaded image onto an in-page <canvas> using the browser's own Canvas API, and the result is turned into a downloadable file with canvas.toBlob(). Nothing is sent to a server at any point.
What do the aspect ratio presets do?
Square, 16:9, 4:3, and 3:2 constrain the box you drag so it always keeps that ratio, which is useful for profile photos (square), video thumbnails (16:9), or standard prints (4:3, 3:2). "Free" removes the constraint so you can drag any rectangle.
Can I redo my selection?
Yes — just drag a new rectangle; the previous selection and preview are replaced automatically. Nothing is saved until you click the download link, so you can try as many crops as you like before deciding.