Image Cropper (Canvas)
Drop an image, drag the selection box, hit Crop. Aspect-ratio presets snap the selection to common shapes (square for avatars, 16:9 for thumbnails, 4:3 for older displays). Output as JPG, PNG, or WebP at any quality level. Runs in your browser — no upload.
How to use the Image Cropper (Canvas)
Drop an image. A selection box appears — drag any edge or corner to resize, drag the centre to move. Aspect-ratio presets constrain the selection to a fixed shape. When you’re happy, click Crop & Download: the selection becomes a new image at the exact pixel dimensions of the selected region.
About Image Cropper (Canvas)
Cropping is a fundamental image operation, but most web tools either upload your image to a server or wrap a heavy WYSIWYG editor with dozens of features you don’t need. A focused, browser-only cropper handles the 90% case: avatar squares for profile pages, 16:9 for video thumbnails, 4:3 for slide deck graphics, freeform for ad-hoc work.
The cropper uses the HTML5 Canvas API. Dropping an image draws it onto a canvas at natural resolution; the overlay div tracks the selection in display coordinates and maps to natural coordinates at crop time. The output is exactly the selected pixels — no resampling, so quality is identical to the source within the crop region. Pick JPG for photos, PNG when you need transparency, WebP for the smallest file at a given quality.
Common use cases
- Avatar / profile photo prep — square crop from a wider photo.
- Thumbnail extraction — 16:9 crop for video previews.
- Social media sizing — each platform has its own ideal crop; preset ratios cover most.
- Document scanning cleanup — crop out the desk / hand around a photographed receipt.