Image Crop Tool

Cropping cuts a rectangular region out of an image and discards everything outside it. It is one of the oldest editing operations because it changes composition without resampling pixels — a 1000×800 region cut from a 4000×3000 photo keeps every original pixel inside that region intact. This page does cropping the way a desktop editor would: drag the selection on top of the preview, type exact numbers into X/Y/W/H fields, lock an aspect ratio when the output has to fit a fixed canvas (avatar, banner, ID photo), then export PNG/JPEG/WebP. Rotation and flipping are applied after the crop so the saved file already has the orientation you want, which matters for printing and for apps that ignore EXIF orientation tags. Everything runs in your browser via Canvas — the image bytes never leave the page, so personal documents and photos stay on your device.

Cropping is logically simple — pick a rectangle, copy its pixels, throw the rest away — but doing it well in the browser has a few moving parts: the on-screen preview is a scaled-down version of the original, the drag handles operate in display coordinates, and the actual crop has to happen in original-image coordinates so no quality is lost. When you load a file, the tool wraps it in URL.createObjectURL() to get a blob URL, then hands it to an HTMLImageElement for decoding (zero-copy, far less memory than a base64 data URL). The natural width and height (img.naturalWidth / naturalHeight) become the canonical coordinate space — every X/Y/W/H stored in state is expressed in those pixels. The preview <img> uses max-width/max-height so the browser scales it to fit; on every load and resize we measure the rendered width via getBoundingClientRect() and store a displayScale ratio (rendered / natural). Mouse deltas during drag are divided by this ratio to translate display motion back into original pixels, which is what keeps the crop rectangle accurate regardless of how much the image is downscaled for display. The crop box itself is an absolutely-positioned <div> overlaid on the image. Its 8 resize handles (four corners + four edges) each fire pointerdown with a mode ('nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w', or 'move'); a window-level pointermove listener (pointer events cover both mouse and touch) reads the live mouse position, computes the delta from the drag start, converts to original pixels, and recomputes left/top/right/bottom of the rectangle. Corner drags resize from the opposite corner as anchor; edge drags keep the perpendicular midline fixed; ratio-locked drags compute the dominant axis first then derive the other. Each result is clamped to the image bounds with a minimum size of 10 px so the rectangle can never invert or escape the canvas. Exporting runs two off-screen canvases. The first is sized to the crop's natural width × height; ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) uses the 9-argument form to pull only the cropped region — Chromium and Firefox both blit this through the GPU as a texture copy, so no resampling happens unless the destination size differs. If rotation or flipping is requested, a second canvas is sized to the post-rotation bounds (swap width/height for 90°/270°), the context is translated to its center, ctx.rotate(angle) and ctx.scale(±1, ±1) apply the transform, and the cropped canvas is drawn at offset (-w/2, -h/2). Finally canvas.toBlob(mimeType, quality) hands the encoded bytes back as a Blob; URL.createObjectURL() turns it into a downloadable URL. Quality is ignored for PNG (lossless) and used as the encoder hint for JPEG and WebP (0–1). The blob's object URL is revoked when a new crop replaces it to avoid keeping decoded pixel data in memory.

• Crop coordinates (X/Y/W/H) are in original image pixels.
• All processing runs in the browser via Canvas API.
• The crop box overlay is a positioned <div> with 8 drag handles.
• Export uses off-screen canvases with drawImage 9-arg form.
• Old blob URLs are explicitly revoked on every state transition.