Does this export a cropped file?

No. It reports a normalised rectangle. Your application can use those coordinates with its image pipeline or media service.

What happens when the source image fails to load?

The editor reports that the image is unavailable and hides the crop controls until you provide a working source.

Media Crop Window

Choose and report a movable image crop as normalised source coordinates.

Product photography crop

Crop sizeHorizontal positionVertical position

Output aspect ratio1.78:1

{"x":0.125,"y":0.2187,"width":0.75,"height":0.5625}

Coordinates are normalised to the supplied source image. The source file is not changed.

Customise

Crop title

Output ratio1.7777777777777777

Code

<MediaCropWindow
  src="/images/product-photo.jpg"
  alt="Ceramic lamp on a studio table"
  sourceWidth={800}
  sourceHeight={600}
/>

Crops must be at least 10% of the largest matching crop. Smaller supplied crops show an error instead of displaying a misleading size control. Aspect-ratio validation allows a 1% relative tolerance.

Media Crop Window lets an editor position and size a rectangular crop at a fixed output aspect ratio. It reports the crop as x, y, width and height fractions of the source image, so your own workflow can apply those coordinates later.

The supplied image stays unchanged. Native range controls make the crop keyboard-operable; dragging the visible crop window adds a pointer shortcut. This component does not create a new image or blob.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/media-crop-window

Usage

import { MediaCropWindow } from "@/components/media-crop-window";

export function ProductImageReview() {
  return (
    <MediaCropWindow
      title="Product photography crop"
      src="/images/product-photo.jpg"
      alt="Ceramic lamp on a studio table"
      sourceWidth={1600}
      sourceHeight={1200}
      aspectRatio={16 / 9}
    />
  );
}

Props

Prop	Type	Default	Description
title	string	required	Visible title and accessible name for the crop editor.
src	string	required	Caller-owned source image URL.
alt	string	required	Alternative text for the complete source image.
sourceWidth	number	required	Source image width in pixels, used to preserve the output ratio.
sourceHeight	number	required	Source image height in pixels, used to preserve the output ratio.
aspectRatio	number	16 / 9	Output width divided by output height in source pixels.
value	MediaCropRectangle	undefined	Controlled normalised crop rectangle.
defaultValue	MediaCropRectangle	centered crop	Initial uncontrolled rectangle.
onValueChange	(crop) => void	undefined	Receives the normalised crop after an accepted range or pointer move.
className	string	undefined	Additional classes merged onto the section.

Customisation

Coordinates stay between 0 and 1 and describe the source image. Supply the actual source dimensions; invalid geometry is reported without presenting a crop.

<MediaCropWindow title="Product crop" src={src} alt={alt} sourceWidth={1600} sourceHeight={1200} aspectRatio={16 / 9} />

Frequently asked questions

Does this export a cropped file?: No. It reports a normalised rectangle. Your application can use those coordinates with its image pipeline or media service.
What happens when the source image fails to load?: The editor reports that the image is unavailable and hides the crop controls until you provide a working source.

Related components

Explore image review toolsBrowse image and media components for other review workflows.Image components