Trim, reframe, and crop your photos with our free Online Image Cropper. Designed for social media avatars, web banners, and photo editing, the tool features interactive rectangular selection handles, circular avatar crop masks, preset aspect ratios (Square 1:1, Widescreen 16:9, Stories 9:16, Photo 3:2, Standard 4:3, Banner 2:1), lossless rotation ($\pm 90^\circ$), and horizontal/vertical flip capabilities. Processing executes 100% locally in your browser's RAM sandbox with zero server uploads.
Drag and drop your JPG, PNG, or WebP photo into the workspace box or browse your device files.
Choose an aspect ratio preset (1:1, 16:9, 9:16, etc.), toggle circular mask if needed, and adjust crop selection handles, rotate or flip.
Click Crop Image to generate your cropped photo in client memory and download the crisp result.
Switch instantly between Freeform drag, Square 1:1, Widescreen 16:9, Stories 9:16, Standard 4:3, Photo Print 3:2, and Banner 2:1 bounding boxes.
Rotate images in ±90° increments, mirror graphics horizontally or vertically, and export circular PNG profile avatars with transparent backgrounds.
All Cropper.js canvas rendering occurs locally inside browser RAM. Your private photos are never transmitted to cloud servers.
Digital image cropping clips raster pixel data along a two-dimensional bounding rectangle defined by origin coordinates ($x, y$) and dimensions ($\text{width}, \text{height}$). When an image is loaded, Cropper.js maps DOM selection handles to original natural pixel coordinates, calculating real-time scale factors between rendered viewport display sizes and high-resolution source image files.
Applying transformations such as rotation ($\theta = \pm 90^\circ$) or scale mirroring ($s_x = -1, s_y = -1$) updates the affine transformation matrix applied to the HTML5 Canvas 2D rendering context. When circular masking is enabled, an arc clipping path (ctx.arc()) is applied to the canvas context, outputting a circular PNG graphic with transparent alpha channels outside the radius.
Because all image rendering takes place inside browser memory WebGL/2D Contexts, processing is immediate and private. Users can export high-quality PNGs, uncompressed WebPs, or JPEGs with custom target dimensions without compromising security or bandwidth.