Image Cropper — draggable crop region, aspect lock, rotate & flip
Drop a PNG, JPG, WebP, GIF, BMP or SVG and crop it with a real interactive editor — draggable corners and edges, locked aspect ratios (1:1, 4:3, 16:9, 4:5, plus custom), 90° rotation, horizontal & vertical flip, and full output control (PNG / JPEG / WebP, quality, resize). The crop math runs in image-pixel space, so a crop of a 6000×4000 photo outputs the full source resolution — no upload, no signup, no watermark.
The cropped result appears here — pixel-accurate, full source resolution by default.
Cropping…
What people crop with this tool
Cropping is one of those operations that everyone needs eventually — and almost every other "free" cropper either gates downloads behind a signup or uploads your photo to a server. This one doesn't.
Profile pictures
Square crop of a candid shot for LinkedIn, X, Instagram, Discord. Lock 1:1 and drag — done in three seconds.
Product close-ups
Highlight the texture, label, or detail of a product photo for an e-commerce listing or marketplace upload.
Focal-point recovery
Re-frame a poorly composed photo — push the subject onto a thirds line, kill dead space, fix tilted horizons with 90° rotation.
OG / social images
Crop hero images to 1200×630 (1.91:1) for Open Graph, or 16:9 for YouTube thumbnails. Fixed-size output guarantees the exact pixel dimensions.
Document scans
Trim the table edges, dirty fingers, and shadow margins out of a phone-scanned receipt or passport — the JPEG ships at full source resolution.
Meme creation
Isolate the reaction face, the punchline panel, or the funny detail from a screenshot before you drop it into a meme generator.
From drop to cropped PNG in four moves
Drop an image
Drag any PNG, JPG, WebP, GIF, BMP or SVG straight onto the left card, or click to browse. The file is decoded with the browser's native image loader — no upload, no third-party CDN.
Drag the crop rect
The white rectangle has eight handles plus a centre drag-to-move zone. Corners resize along both axes, edges resize along one, and the rule-of-thirds grid helps you compose. Coordinates are stored in image-pixel space, so accuracy never depends on screen size.
Lock an aspect or rotate
Tap 1:1 for a square avatar, 16:9 for a video thumbnail, 4:5 for Instagram portrait, or enter a custom W:H ratio. Need to fix a sideways scan? Use the 90° rotate / flip buttons — they compose cleanly.
Download PNG, JPEG or WebP
Click Crop image to render the result to a hidden canvas, then Download. JPEG/WebP quality and (optionally) a background colour for transparent pixels are configurable.
Frequently asked questions
No. The cropper uses the Canvas API entirely inside your browser — your image never leaves the device. You can disconnect from the internet after the page loads and it will still work.
This tool handles a single image at a time. For batch crops, drop each image, set the crop, download, then drop the next — your aspect ratio, output format and quality settings persist between images.
Yes — the crop rectangle is tracked in image-pixel space, not display-pixel space. A crop of a 6000×4000 photo outputs the full source resolution of that crop. If you want a downscaled output (e.g. crop a square and ship 1080×1080), switch Output dimensions to Fixed.
Yes — 90° increments left and right, plus horizontal and vertical flip. Arbitrary angles (e.g. straightening a 3° tilt) aren't supported in v1; the goal here is pixel-accurate crops without resampling on rotation.
PNG and WebP outputs preserve alpha. JPEG has no alpha channel — when you crop a transparent PNG to JPEG, the tool asks for a background colour to fill transparent pixels (white by default).
Soft limit 20 MB — the tool warns but still tries. Hard limit 100 MB — beyond that, browsers tend to run out of memory when allocating the decode buffer. For very large source files, consider downscaling first with the Image Resizer.
About in-browser image cropping
Cropping is the single most-searched image-editing task on the web — roughly 2 million queries every month across "crop image", "crop jpg", "square cropper", and the long tail of platform-specific aspect ratios. Most results funnel users into apps that either gate downloads behind a signup, slap a watermark on the output, or quietly upload the photo to a server. None of that happens here.
Why crop locally
- Privacy. Passport scans, ID cards, screenshots of private chats — these never need to leave your machine. The Canvas API can decode, crop, and re-encode any common raster format without a single network request.
- Resolution. Server-side croppers often downscale before they crop, losing detail. This tool stores crop coordinates in image-pixel space, so a 200×200 crop of a 6000×4000 source is 200×200 of real pixels — not 200×200 of a 1000×667 thumbnail.
- Speed. No upload, no queue, no rate limit. Even a 30 MP photo crops in under 100 ms on a modern phone.
- Format freedom. Re-encode to PNG, JPEG or WebP on the way out.
toBlob(quality)gives full control over the JPEG/WebP quality knob.
How the crop region works internally
The image is rendered as an <img> at whatever display size fits the editor. On top sits an overlay div containing four .crop-mask rectangles that form an "L"-frame around a central .crop-rect. The eight handles are 12×12 px (22×22 on coarse pointers like phones) and use Pointer Events with setPointerCapture, so a single code path handles mouse, touch and stylus input.
Every pointermove converts the cursor delta from CSS pixels into image pixels by dividing by the current display scale (img.naturalWidth / img.clientWidth). All four {x,y,w,h} coordinates of the crop rect live in image-pixel space at all times — the DOM positions of the rect and handles are derived from them, never the other way around. This is why resizing the browser window doesn't shift the crop, and why the final drawImage(src, sx, sy, sw, sh, 0, 0, outW, outH) call is exact to the pixel.
Aspect lock math
When an aspect is locked, every resize operation projects the user's drag onto the ratio's diagonal. For a corner handle the rectangle scales uniformly from the opposite corner; for an edge handle the other axis is forced to follow. Constraints are then clamped against the image bounds with a minimum size of 16×16 pixels so you can't accidentally collapse the rect.
Rotation & flip composition
Rotation and flip are tracked as {rotation: 0|90|180|270, flipH: bool, flipV: bool} rather than applied destructively. The crop preview and final canvas render apply ctx.translate → ctx.rotate → ctx.scale in that order before drawImage. No bitmap is ever rotated until export — meaning rotation is free, undoable, and lossless.