CruxDevCruxDev Tools Prompts
image Utility • Zero-Server Privacy • 100% Client-Side

Image Cropper

Crop any image by dragging a selection, with rotate and flip controls. Export production-ready PNG or JPEG.

Overview

Crop an image by dragging a selection rectangle or by typing exact pixel coordinates, with aspect-ratio presets, rotate and flip controls, and a full-resolution export. The selection is drawn on a full-resolution working canvas, so the exported image keeps every pixel of the region you selected, and the download is refused rather than mislabelled if your browser lacks the chosen encoder.

How It Works

Drop an image and drag a rectangle directly on it; a dimmed overlay outside the selection shows exactly what will be removed, and a live readout reports the selection size in source pixels. Lock the selection shape with an aspect preset - 1:1, 4:3, 3:4, 16:9 or 9:16 - or skip dragging entirely and type X, Y, width and height in source pixels, then Select that rectangle. Use Rotate L, Rotate R, Flip H and Flip V to orient the image before or after selecting. Press Apply Crop to see the cropped result in the right pane, then Download to save it as PNG, JPEG or WebP. Selections smaller than five pixels in either dimension are refused with a prompt, and Clear Selection resets the overlay without touching the image.

Step-by-Step Usage Guide

  1. Drop the image onto the canvas.
  2. Drag a rectangle, optionally with an aspect preset locked, or type exact X, Y, width and height.
  3. Rotate or flip first if the orientation is wrong.
  4. Choose PNG, JPEG or WebP, Apply Crop, then Download.

Technical Specifications & Standards

The tool keeps two canvases. The working canvas holds the image at full native resolution, including any rotations and flips you have applied - each transform is a canvas rotation or a scale(-1, 1) draw, which is lossless in the sense that it does not resample pixels. The display canvas scales that down to at most 560 pixels wide so large photos stay manageable on screen, and every pointer coordinate is mapped from display space back into working space by the same scale factor before cropping - the numeric fields speak source pixels directly and are converted through the same factor. Aspect-locked dragging constrains the selection to the preset ratio, keeping the anchor corner and the dominant drag dimension. The export crops the working canvas at native resolution, so a selection on a 4000-pixel image yields a 4000-pixel-scale crop, not a 560-pixel one. Output is a data URL at 0.92 quality for the lossy formats, and the data URL prefix is checked against the requested type: browsers return PNG data silently when asked for an encoder they lack, and this tool discards the result with an explanation instead of saving it under the wrong extension. Metadata does not survive: the canvas round trip drops EXIF including GPS, and a rotated image's pixels are physically rearranged, so the orientation flag becomes irrelevant.

Targeted Use Cases

  • Trimming a screenshot to the relevant region before sharing.
  • Square-cropping a photo for an avatar or product listing with the 1:1 lock.
  • Repeating a precise crop across images using numeric coordinates.
  • Straightening a scanned photo with 90-degree rotations before cropping.

Notes & Gotchas

  • Rotate before selecting; transforms reset the current selection.
  • Use the numeric fields when an edge has to land on an exact pixel.
  • Prefer PNG for screenshots and graphics; JPEG or WebP 0.92 for photographs.
  • Remember the crop exports at source resolution, so a small-looking selection can still be a large file.

Frequently Asked Questions

Does cropping reduce image quality?

No resampling happens - the selected region is copied at full resolution. JPEG and WebP output re-encode at 0.92 quality, which is visually lossless for photos; PNG is lossless entirely.

How do the aspect presets work?

With 1:1, 4:3, 3:4, 16:9 or 9:16 locked, your drag is constrained to that ratio as you draw, keeping the corner you started from. Changing the preset clears the current selection because the geometry changed.

Can I crop by numbers instead of dragging?

Yes - the numeric fields take X, Y, width and height in source-image pixels, including on images larger than the screen, and Select that rectangle applies them to the same pipeline as a drag.

Why is my exported crop bigger than the image shown?

The on-screen canvas is a scaled preview capped at 560 pixels wide. Exports crop the full-resolution working canvas, so output dimensions follow the source image, not the preview.

Is metadata like GPS preserved?

No. The canvas re-encode drops EXIF and GPS data, which matters if you were cropping to remove location data - cropping achieves that too.