Image Cropper

Key takeaways

• Pixel-precise crop with x, y, width, and height
• Rectangles clamp safely to image bounds
• Export as PNG, JPEG, or WebP after cropping
• Runs locally — screenshots never leave the browser

What is image cropping?

Cropping keeps a rectangular region of an image and discards the rest — useful for avatars, product frames, and removing margins.

This tool takes integer pixel coordinates (x, y, width, height) from the top-left origin, clamps them to the image bounds, and exports the region as PNG, JPEG, or WebP. It is precise and keyboard-friendly rather than a freehand editor — ideal when you already know the box you need.

Features

• Pixel coordinates

  Set x, y, width, and height for an exact rectangle.

• Safe clamping

  Overflowing boxes shrink to stay inside the image.

• Format on export

  Save the crop as PNG, JPEG, or WebP.

• Private canvas crop

  Image bytes never leave your device.

How it works

1. 1

   Drop an image

   See source width×height in the status line.

2. 2

   Enter the crop box

   x/y from the top-left, plus width and height in pixels.

3. 3

   Crop and download

   Export the rectangle in your chosen format.

Example walkthroughs

• Avatar square

  Cuts a 512×512 face region for a profile image.

  portrait.jpg → x=200 y=40 width=512 height=512

• Remove margins

  Trims padding from a screenshot before sharing.

  slide.png → x=40 y=40 width=1840 height=1000

Use cases

• Profile and icon crops

  Cut exact squares for avatars and store listing icons.

• Screenshot cleanup

  Remove desktop chrome or margins before attaching to a ticket.

Code snippets

• Crop with drawImage

  js

  Canvas source-rectangle crop matching this tool’s approach.

  ctx.drawImage(
    bitmap,
    sx, sy, sWidth, sHeight, // source rect
    0, 0, sWidth, sHeight    // destination
  );

Common errors

• Crop looks empty or tiny

  Cause: Width/height were too small, or x/y sat past the image edge.

  Fix: Check source dimensions first; the tool clamps but will reject empty boxes.

• Wrong region exported

  Cause: Origin is top-left — y grows downward.

  Fix: Measure from the top-left corner of the image, not the bottom.

About Image Cropper

Image Cropper is a private, precision crop workspace for when you know the box you want. Drop an image, enter x/y origin and width/height in pixels, choose an export format, and download the cutout. Processing uses the canvas API in your browser — no upload of screenshots or product photos.

People searching “crop image online” often need either a quick visual trim or an exact pixel region for an avatar, Open Graph frame, or design handoff. This tool focuses on the exact case: numbers you can copy from a design tool or inspector, with automatic clamping if the box overflows the image.

It is intentionally not a full Photoshop-style editor. There is no freehand lasso or generative expand — just a reliable rectangle crop that stays fast and private. After cropping, Resize Image can scale the result to a required delivery size, and Image Compressor can shrink bytes further.

Transparency is preserved when you export PNG or WebP. JPEG export is available for photo cutouts that do not need alpha. Animated GIFs flatten to the first frame on export, same as the rest of the image cluster.

Best practice: note the source dimensions from the status line before cropping, keep a little padding around faces/UI chrome, and avoid cropping so tightly that compression artifacts hug important edges.

Frequently asked questions

Explore more

• All tools

  Browse formatters, converters, encoders, and more.

• Image tools

  Compress, resize, convert, and crop images in your browser.

• Privacy

  How client-side tools handle your data.