Skip to content

Crop Image Online — Drag-Selection Crop with Aspect Presets (1:1, 4:3, 16:9, 3:2)

Browser-side — no upload
Last verified May 2026 — runs in your browser

Crop Image Online — Interactive Drag-Selection via WHATWG Canvas drawImage Sub-Rectangle Extraction

Crop any image with an interactive drag-to-select rectangular crop region, plus 4 aspect ratio preset constraints: 1:1 (square), 4:3 (the NTSC/PAL/SECAM standard television aspect ratio per ITU-R BT.601 since 1982), 16:9 (the HDTV aspect ratio per ITU-R Rec. 709 approved by CCIR in 1989, first official release 1990, BT.709-1 released November 1993), and 3:2 (the 35mm still-photography ratio originated by Oskar Barnack's Leica I in 1925 at the Leipzig Fair via the 24×36mm full-frame format derived from two horizontally-stitched 18×24mm cine frames). The conversion runs locally via WHATWG Canvas drawImage's 9-argument source-rectangle extraction form (`drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh)` per html.spec.whatwg.org/#dom-context-2d-drawimage) — the pixels inside the crop region are preserved 1:1 at native source dimensions, only the pixels outside the crop region are discarded. Output format matches source: PNG sources output PNG (full RGBA alpha preserved), JPG sources output JPG at quality 0.92 (re-encoded via canvas.toBlob with Annex K quantisation per ITU-T T.81). Files never leave the device.

Related: Aspect Ratio Crop Circle Crop Round Corners

How to crop an image

  1. Drop your image onto the tool or click to browse. The browser's built-in decoder loads the source into a Canvas at native dimensions.
  2. Pick an aspect-ratio preset: Free (unconstrained), 1:1 (square), 4:3 (television 4:3), 16:9 (HDTV widescreen), or 3:2 (35mm photo). The preset constrains the drag-selection geometry.
  3. Drag any rectangular region on the image to define the crop area, or type exact W×H pixel values into the manual input fields. The current crop dimensions display live during the drag.
  4. The tool runs Canvas drawImage with the 9-argument source-rectangle form to extract those pixels into a fresh canvas at native resolution, then toBlob() to encode the output (PNG if source was PNG; JPG quality 0.92 otherwise).
  5. Click Download to save the cropped copy. The original stays on disk untouched — files never leave the device.

Common use cases

  • Trimming backgrounds out of product shots for a cleaner e-commerce listing — drag to select just the product, keep at native resolution.
  • Cropping to a specific subject after a wide-angle shot for a tighter social-media post (Instagram square 1:1, Twitter/X 16:9, Facebook 4:3 depending on platform).
  • Removing sensitive edges (addresses, license plates, name badges) from a screenshot before sharing — the discarded pixels never reach the output blob.
  • Producing 3:2 native crops from a 4:3 phone camera shot to match a 35mm photography workflow (print at 4×6, 8×12, etc.).
  • Preparing pixel-precise UI asset crops for design systems where the slot dimensions are known in advance — manual W×H input gives exact control.

Frequently asked questions

Is there a minimum crop size?

The tool accepts any crop down to 1×1 pixel. Extremely small crops are not practically useful but the tool does not restrict them; the Canvas drawImage 9-argument source-rectangle form per WHATWG html.spec.whatwg.org accepts source dimensions ≥ 1 in either axis.

Why these four aspect ratio presets?

1:1 is the universal square (Instagram square posts, app icon source masters, social profile avatars). 4:3 is the NTSC/PAL standard-definition television aspect ratio per ITU-R BT.601 (ratified 1982) — still common for tablet displays and printer-friendly photo formats. 16:9 is the HDTV widescreen ratio per ITU-R Rec. 709 (CCIR approval 1989, first official release 1990, BT.709-1 November 1993) — universal for modern monitors / TVs / YouTube. 3:2 is the 35mm still-photography ratio originated by Oskar Barnack's Leica I (Leipzig Fair 1925, 24×36mm full-frame derived from two stitched 18×24mm cine frames) — still the native ratio of full-frame digital SLR/mirrorless sensors.

Does cropping lose quality?

Pixels inside the crop region are preserved 1:1 from the source HTMLImageElement to the destination canvas via Canvas drawImage's 9-argument source-rectangle form (no scaling, no resampling, byte-identical pixel copy). Only pixels outside the crop region are discarded. Format preservation: PNG sources stay lossless RGBA throughout the chain; JPG sources are re-encoded via canvas.toBlob at quality 0.92 (ITU-T T.81 Annex K perceptual quantisation; ~1-2% perceptually invisible additional loss versus the source JPG).

Can I match a specific aspect ratio not in the presets?

Use the aspect-ratio-crop tool for centred auto-crops at additional fixed ratios (9:16 portrait, plus 1:1/4:3/16:9/3:2). For arbitrary rectangular regions with manual W×H values, this tool's manual input fields accept any (positive integer, positive integer) pair within the source dimensions. For circular masks (alpha-clipped to a circle), use the circle-crop tool. For rounded-rect corner masks, use the round-corners tool.

Is my image uploaded?

No. The decode + Canvas drawImage 9-argument source-rectangle extraction + toBlob re-encoding all run client-side via WHATWG Canvas. DevTools Network tab shows zero upload requests during conversion.

Drag-to-select crop region + 4 aspect presets + WHATWG Canvas drawImage 9-argument sub-rectangle form

The crop tool exposes the WHATWG Canvas 2D Context's drawImage 9-argument source-rectangle extraction form: `drawImage(image, sx, sy, sourceWidth, sourceHeight, 0, 0, sourceWidth, sourceHeight)` per html.spec.whatwg.org/#dom-context-2d-drawimage. The (sx, sy, sw, sh) tuple defines the source rectangle to extract from the loaded HTMLImageElement; (0, 0, sw, sh) writes those pixels to a fresh canvas at native resolution (no scaling). The four preset aspect ratios constrain the drag-selection geometry: 1:1 (a perfect square — useful for Instagram square posts, profile avatars, app icon source masters), 4:3 (the NTSC/PAL television aspect ratio per ITU-R BT.601, ratified by the CCIR in 1982 — the standard-definition TV aspect for nearly 70 years until HDTV's 16:9 displaced it in the mid-2000s; still used for tablet displays, classic camera SLRs, and printer-friendly photo formats), 16:9 (ITU-R Rec. 709 HDTV, ratified by the CCIR 1989 as 'Recommendation XA/11 MOD F', first official release 1990, renamed to ITU-R BT.709 when the CCIR became ITU-R in 1992, BT.709-1 November 1993 — the modern HDTV/UHDTV widescreen ratio universally used for YouTube videos, 1080p/4K monitors, modern TVs), and 3:2 (the 35mm still-photography ratio originated by Oskar Barnack at Ernst Leitz Wetzlar — the Ur-Leica prototype 1913, the commercial Leica I released at the Leipzig Fair 1925 — via the 24×36mm full-frame format derived from stitching two 18×24mm cine frames horizontally, since carried into every full-frame digital SLR/mirrorless sensor through to 2026). The 'Free' preset removes the constraint and lets you drag any rectangular region. Output preserves source format: PNG → PNG (RGBA alpha intact); JPG → JPG quality 0.92 (re-encoded via canvas.toBlob with ITU-T T.81 Annex K perceptual quantisation, ~1-2% perceptually invisible loss).

  • Drag-to-select crop region — click and drag any rectangular area on the image; manual W×H pixel input also accepted
  • Five aspect ratio modes: Free (unconstrained) + 1:1 (square) + 4:3 (NTSC/PAL BT.601 1982) + 16:9 (HDTV Rec. 709 1989) + 3:2 (35mm Leica 1925)
  • Rule-of-thirds grid overlay drawn on the live crop selection (3×3 composition guide at low-opacity cyan per the John Thomas Smith 1797 *Remarks on Rural Scenery* convention)
  • Real-time crop dimensions display (current W×H px during drag)
  • Output preserves source format: PNG stays PNG with RGBA alpha; JPG stays JPG at quality 0.92 (ITU-T T.81 Annex K perceptual quantisation)
  • WHATWG Canvas drawImage 9-argument source-rectangle extraction at native pixel resolution (no scaling, no resampling — pure pixel copy from source to destination)
  • Pixels inside the crop region preserved 1:1; only pixels outside the region are discarded (lossless from the source pixels)
  • Browser-side via WHATWG Canvas drawImage + HTMLCanvasElement.toBlob — no upload
  • Operates in sRGB (IEC 61966-2-1:1999); source images without an embedded ICC profile are interpreted as sRGB

Free. No signup. No file uploads. Ads via AdSense (consent required).

Sources (10)
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() 9-argument source-rectangle extraction form. html.spec.whatwg.org/#dom-context-2d-drawimage — the crop pipeline core: drawImage(source, sx, sy, sourceWidth, sourceHeight, dx, dy, destinationWidth, destinationHeight) extracts the (sx, sy, sw, sh) sub-rectangle from the source HTMLImageElement and writes those pixels to (dx, dy, dw, dh) of the destination canvas; setting dx=dy=0 and dw/dh equal to sw/sh produces a pixel-exact crop with no scaling.
  • International Telecommunication Union (ITU-R, formerly CCIR) (1982). ITU-R BT.601 — Studio encoding parameters of digital television for standard 4:3 and wide screen 16:9 aspect ratios. itu.int/rec/R-REC-BT.601 — the 4:3 aspect ratio standard for NTSC/PAL/SECAM standard-definition television, ratified by the CCIR in 1982; the dominant TV aspect for nearly 70 years until HDTV's 16:9 displaced it in the mid-2000s; still used for tablet displays and printer-friendly photo formats.
  • International Telecommunication Union (ITU-R, formerly CCIR) (1990). ITU-R Rec. 709 / BT.709 — HDTV signal characteristics + 16:9 aspect ratio. itu.int/rec/R-REC-BT.709 — the HDTV widescreen 16:9 aspect ratio standard, approved by the CCIR in 1989 as 'Recommendation XA/11 MOD F', first official release 1990, renamed to ITU-R BT.709 when the CCIR became ITU-R in 1992, BT.709-1 published November 1993; the modern HDTV/UHDTV widescreen ratio universally used for YouTube videos, 1080p/4K monitors, modern TVs.
  • Barnack, O. (Ernst Leitz Wetzlar) (1925). Leica I — 35mm full-frame 24×36mm format + 3:2 aspect ratio origin. leica-camera.com/en-US/photography/100-years/the-history-of-the-leica-I — Oskar Barnack's commercial Leica I camera, released at the Leipzig Spring Fair 1925 (Ur-Leica prototype dated 1913), established the 35mm still-photography full-frame format (24×36mm) derived from stitching two 18×24mm cine frames horizontally; the 3:2 aspect ratio remains the native ratio of every full-frame digital SLR/mirrorless sensor through 2026.
  • WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native raster decoding). html.spec.whatwg.org/#htmlimageelement — universal browser entry point: JPG / PNG / WebP / AVIF / BMP / GIF / HEIC (Safari only) load into HTMLImageElement and reach Canvas drawImage uniformly via the browser's built-in decoder registry.
  • WHATWG (live). HTML Living Standard — HTMLCanvasElement.toBlob(). html.spec.whatwg.org/#dom-canvas-toblob — re-encodes the canvas pixel buffer to a Blob via the browser's built-in encoder for the requested MIME type (image/png lossless, image/jpeg with quality argument for ITU-T T.81 Annex K perceptual quantisation).
  • ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — JPEG baseline DCT bitstream; Annex K quantisation tables scale by the canvas.toBlob quality argument (0.92 in this tool's JPG output path).
  • Hamilton, E. (C-Cube Microsystems) (1992). JPEG File Interchange Format (JFIF) Version 1.02. 1 September 1992 — JPEG container format; APP0 marker, density units, thumbnail handling. Output via canvas.toBlob('image/jpeg') ships JFIF v1.02 by default.
  • W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — PNG output format for sources with alpha; preserves 8-bit alpha per RGBA pixel byte-exactly through canvas.toBlob('image/png').
  • International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; source images without an embedded ICC profile are interpreted as sRGB by the browser decoder during the load step.

These are the W3C, ISO/IEC, ITU-T, and IETF specifications the tool implements or builds on. Locate them on w3.org, iso.org, itu.int, or datatracker.ietf.org.

Related guides

Sponsored