Image Cropper

You have a photo and need to cut out a specific region — a face for an avatar, a product for a listing, a screenshot for documentation. Drag the crop box to select the area, then download the cropped image. Everything happens in your browser using the Canvas API.

How Canvas-Based Cropping Works

The crop operation uses ctx.drawImage(img, sx, sy, sw, sh, 0, 0, dw, dh) where sx, sy, sw, sh define the source region and dw, dh define the output canvas size. This extracts exactly the specified rectangle from the source image at full resolution.

Cropping vs Resizing

Cropping removes parts of the image. The remaining content stays at the same pixel size.

Resizing scales the entire image to a different pixel count.

You often combine both: crop first to get the right composition, then resize to the target dimensions.

Common Crop Ratios

Cropping Images in Code

JavaScript / Canvas API

function cropImage(imageEl, x, y, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imageEl, x, y, width, height, 0, 0, width, height);
  return canvas.toDataURL('image/png');
}

Python (Pillow)

from PIL import Image

img = Image.open('input.jpg')
# crop(left, upper, right, lower)
cropped = img.crop((100, 50, 800, 600))
cropped.save('cropped.jpg')

Sharp (Node.js)

const sharp = require('sharp');

sharp('input.jpg')
  .extract({ left: 100, top: 50, width: 700, height: 550 })
  .toFile('cropped.jpg');

Frequently Asked Questions

Does cropping reduce image quality? No. Cropping only removes pixels outside the selection. The pixels inside the crop area are preserved at full resolution and quality.

Can I crop to an exact aspect ratio? Yes. Enable the aspect ratio lock and select one of the preset ratios (1:1, 16:9, 4:3). The crop selection will be constrained to that ratio as you drag.

Is my image uploaded to a server? No. Cropping uses the Canvas API in your browser. The image never leaves your device.

What is the maximum output size? The output size equals the dimensions of your crop selection. If you crop a 4000×3000 photo to a 3000×2000 region, the output is 3000×2000 — no upscaling occurs.