Image Cropper
Crop images with exact pixel boundaries, preset aspect ratios (1:1, 4:3, 16:9), or circular avatar framing. Edit photos privately in your browser without uploading files to remote servers.
How to use
Upload a JPG, PNG, or WebP photo by dragging it into the dropzone or selecting a file.
Choose a preset aspect ratio such as 1:1 (Square), 16:9 (Widescreen), or Freeform.
Adjust the crop bounding box by dragging coordinates or entering exact width, height, and offsets.
Preview the cropped area in real time and download the result in WebP, PNG, or JPEG format.
How client-side image cropping works
Image cropping extracts a sub-region (defined by horizontal offset x, vertical offset y, bounding width, and bounding height) from a source raster image. In web applications, this operation utilizes the HTML5 CanvasRenderingContext2D.drawImage() method with 9 parameters: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). This instructs the rendering engine to read directly from the specified coordinates of the source bitmap and write to a destination canvas without altering the surrounding pixels.
Common aspect ratio presets
Different publishing platforms require distinct aspect ratios to prevent unintended automated cropping or stretching:
| Aspect Ratio | Decimal Ratio | Common Applications |
|---|---|---|
| 1:1 (Square) | 1.000 | Profile avatars, Instagram feed posts, product catalog thumbnails |
| 4:3 (Standard) | 1.333 | Classic photography, tablet displays, legacy presentation slides |
| 16:9 (Widescreen) | 1.778 | YouTube video thumbnails, presentation decks, modern monitors |
| 9:16 (Vertical) | 0.562 | Mobile stories, TikTok, Instagram Reels, YouTube Shorts |
| 3:2 (Classic 35mm) | 1.500 | DSLR camera sensors, standard photographic prints |
Circular avatar cropping
For social media avatars and profile headers, circular framing is essential. When circle crop mode is selected, the canvas applies an elliptical clipping path (ctx.arc()) to render a circular mask. The resulting file is saved as a transparent 32-bit PNG or WebP, ensuring seamless display over any background.
Zero server transmission guarantee
Photos, employee headshots, and personal documents frequently contain confidential information or EXIF geolocation metadata. This tool operates entirely inside your browser's local JavaScript sandbox. No image data or coordinates are transmitted to remote servers.
Frequently asked questions
Does cropping reduce image resolution?
Cropping removes pixels outside your selected bounding box. The cropped output maintains 100% of the native pixel density and resolution of that specific area without artificial downscaling.
Can I crop an image into a circle?
Yes. Enable the Circular Crop option to clip the output to a perfect circle with a transparent background, ideal for profile avatars.
What image formats can I export?
You can export the cropped image as PNG (recommended for transparent circular crops), WebP (modern high-efficiency format), or JPEG.
Are my images sent to any external server?
No. All crop calculations and canvas exports execute exclusively in your browser. Your images never leave your local device.
What happens if I enter crop dimensions larger than the original image?
The crop coordinates are automatically constrained to the boundaries of the source image to prevent distortion and clipping errors.