Crop an image to exact dimensions

Extract a rectangular region from an image, optionally locked to an aspect ratio.

freeworks offlinenothing uploaded
ToolImage Cropper
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

A rectangular source region is selected by position and size, then copied into a destination bitmap; optional aspect-ratio locking adjusts one dimension before sampling. Pixels outside the source bounds are clipped rather than invented.

  • Rectangular cropping maps directly to canvas source and destination regions.

Worked example

Crop a 200 pixel square
Input
											Input: data:image/png;base64,iVBORw0KGgo=
X: 50
Y: 50
Width: 200
Height: 200
Output
												PNG data URL containing the 200×200 region starting at (50, 50)

When to use this

Profile photos, CMS hero images, and thumbnail pipelines crop regions.

Edge cases

  • Negative coordinates require clipping or translation.
  • A crop beyond image bounds cannot sample missing pixels.
  • High-DPI source pixels and CSS display pixels use different coordinate spaces.

References