How It Works

Image Cropping

Canvas API with drag-and-drop controls — instant, pixel-perfect cropping with no external dependencies.

HTML5 Canvas API

Canvas 2D context enables pixel-perfect image manipulation directly in the browser — no external libraries or downloads needed.

  • Direct pixel access — read and write at pixel level
  • GPU-accelerated rendering for smooth 60 FPS
  • Real-time preview as you adjust the crop area
  • Format export to JPEG, PNG, or WebP with quality control

Drag & Drop Interface

Mouse and touch event handlers power 8-point resize handles with smooth dragging and aspect ratio lock.

  • 8 resize handles — corners and edges for precise control
  • Full touch support on tablets and smartphones
  • Aspect ratio lock with preset and free-form modes
  • Boundary constraints prevent crop box from overflowing

Cropping pipeline

1

Image Load

Decode & display

2

Select Area

Drag & resize

3

Canvas Crop

Extract pixels

4

Compress

Optimize output

5

Export

JPEG/PNG/WebP

Supported aspect ratios

1:1

Square

Instagram, Profile pics

16:9

Widescreen

YouTube, Presentations

4:3

Standard

Classic TV, Photos

3:2

Photo

DSLR, Print

9:16

Portrait

Stories, Reels

2:3

Portrait Photo

Print photos

21:9

Ultrawide

Cinema, Banners

Free

Free form

Any custom size

Technical specifications

Input formatsJPEG, PNG, WebP, AVIF, BMP, TIFF, GIF
Output formatsJPEG (quality control), PNG (lossless), WebP
Max image sizeLimited by browser memory (typically 50MP+)
Crop processingInstant (< 100 ms)
UI responsiveness60 FPS drag and resize
Model downloadNone — zero footprint
Memory usageMinimal — loaded image only
Mobile supportFull touch gesture support (iOS & Android)

Instant processing

Canvas-based cropping completes in under 100 ms for any image — no WASM module to download, no model to load.

8 preset ratios

One click switches between Square, 16:9, 4:3, 3:2, 9:16, and more — or go free-form for any custom dimension.

Zero footprint

No model files, no caching, no storage required. The cropper works on any browser with Canvas API support.