Image Cropper
Canvas APIFree crop with aspect ratio presets
Drag & drop files here, or click to select
Supports JPG, PNG, WebP, AVIF, BMP and other common formatsHow to Use
- Click the area above to select a file, or drag and drop a file onto the page
- Adjust parameters in the settings area
- Click the process button and download the result when ready
Frequently Asked Questions
How It Works
The Image Cropper uses the HTML5 Canvas API to extract a rectangular region from an image. The Canvas 2D drawImage() method with source and destination rectangle parameters performs the crop operation at the pixel level.
The crop process: (1) The source image is loaded as an ImageBitmap. (2) A new Canvas is created at the target crop dimensions. (3) The drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) call extracts the region from (sx, sy) to (sx+sw, sy+sh) and draws it to the output Canvas. (4) The cropped result is exported as JPEG, PNG, or WebP.
The tool provides interactive crop selection with draggable handles, maintaining aspect ratio lock when enabled. Preset ratios (16:9, 4:3, 1:1, etc.) constrain the selection dimensions. The crop coordinates and dimensions are calculated relative to the original image size, not the display size, ensuring full-resolution output.
Tips & Best Practices
- Rule of thirds: Position your subject at the intersection points of a 3×3 grid for the most visually appealing composition.
- Crop before compress: Removing unnecessary pixels first reduces file size more effectively than post-crop compression alone.
- Maintain aspect ratio: Use aspect ratio locks to ensure cropped images fit standard display formats (16:9, 1:1, 4:5).
- Center the subject: When cropping for social media, keep the main subject centered to prevent it from being cut off on different devices.
- Don't over-crop: Removing too much of the image can make it feel cramped. Leave some breathing room around subjects.
- Use presets for platforms: 1:1 for Instagram feed, 4:5 for Instagram portrait, 16:9 for YouTube thumbnails.
Use Cases
Social media managers cropping product photos to 1:1 square format for Instagram grid aesthetics and visual consistency.
E-commerce managers standardizing product images to consistent dimensions for clean, professional catalog presentation. Bloggers cropping featured images to the exact dimensions required by their CMS theme for optimal display. Photographers cropping portraits from landscape-oriented originals for better composition and focus on the subject. Designers extracting specific regions from screenshots for documentation, presentations, and UI mockups. Content creators cropping thumbnails to highlight the most engaging visual element from wider shots.