Crop Image
Crop an image to any region by dragging a selection box.
🔒 Runs entirely in your browser — your image is never uploaded.
Drag & drop an image here, or click to browse
Drag on the image to select a crop area, or fine-tune the numbers below.
Cropped preview
How Crop Image works
How does the crop selection work under the hood?
The image itself is displayed as a regular <img> element, not a canvas, and a draggable overlay box tracks your pointer to define the crop rectangle in on-screen pixels. Those display coordinates are converted to the image's real pixel dimensions using a scale factor (displayed width ÷ natural width), and only when you click Crop does the tool draw the selected region onto a canvas with drawImage(img, x, y, w, h, 0, 0, w, h) and export it.
What's a typical use case?
Cutting an unwanted border or watermark off a downloaded image, pulling a single subject out of a group photo, or trimming a screenshot down to just the relevant window before sharing it. The numeric X/Y/width/height fields also let you dial in an exact crop region if you already know the pixel coordinates you need.
Is the crop precise down to the pixel?
It should be, since the drag interaction is rescaled back to natural image pixels rather than working in on-screen CSS pixels, and every value is rounded and clamped so the crop box can never extend past the image edges. Resizing the browser window recalculates that scale factor automatically, so the crop box stays aligned with the image if your layout reflows mid-edit.