Crop & Aspect Ratio

Open the crop at a ratio, lock it, and control the size and type of the file Save writes.

What the User Can Do

The Adjust tool holds the crop. It’s in every edition.

The Adjust tool on a mountain lake: 3:4 picked in the ratio strip, its window centered on the peak and its reflection, the photo outside it dimmed, Done under the strip

Control	What it does
Crop window	Drag a corner or an edge to resize it. Drag the photo under it to pan.
Zoom	Wheel, pinch or the Scale slider, from 100% to 1000%.
Ratio	Free, 1:1, 1:2, 3:4, 9:16, 16:9, 4:3 and 2:1.
Focus	Places the window on the photo’s subject (Auto) or its middle (Center).
Straighten	A ruler from −45° to 45° in 0.1° steps, with a magnet at 0.
Rotate	Turns the photo 90° to the left.
Flip	Mirrors the photo left to right.

A ratio takes the largest window of that shape, placed where Focus says. A handle follows the finger as far as the toolbar, the editor’s sides and the crop pill. Let go, the window rests there for a moment, then springs back to fill the photo’s area, centered, as on the iPhone.

The same 3:4 crop on an iPhone: the window over the photo, the ratio strip under it from 1:1 to 16:9, and Done

Open at a Ratio

aspectRatio is width / height. The user can still pick another ratio.

Banner.tsx

import { EmbedEditor } from '@embededitor/full/react';

// opens at 16:9 on the subject
const Banner = ({ src }: { src: string }) => (
	<EmbedEditor
		aspectRatio={16 / 9}
		src={src}
	/>
);

Lock a Ratio

Add aspectRatioLocked to fix the ratio. The ratio selector is hidden.

Avatar.tsx

import { EmbedEditor } from '@embededitor/full/react';

// always square
const Avatar = ({ src }: { src: string }) => (
	<EmbedEditor
		aspectRatio={1}
		aspectRatioLocked
		src={src}
	/>
);

Ratios

`aspectRatio`	`aspectRatioLocked`	Opens with
a number	`true`	That ratio, even over a saved edit.
`null`	`true`	The ratio the opened state has: its own, or its crop’s shape.
a number	`false`	That ratio for a new edit. A saved edit opens as it was saved.
`null`	`false`	A free crop.

Changing aspectRatio live applies as one step undo can take back.
Changing the lock live starts a new undo history at the locked ratio, so undo can’t free it.
Two ratios within half a percent of each other count as one.

Output Size and Type

Upload.tsx

<EmbedEditor
	maxHeight={2048}
	maxWidth={2048}
	outputQuality={80}
	outputType='image/jpeg'
	src={src}
/>

Prop	Type	Default	What it does
`maxWidth`	`number` (1 or more)	none	The output’s largest width, in px.
`maxHeight`	`number` (1 or more)	none	The output’s largest height, in px.
`outputType`	`'image/jpeg' \| 'image/png' \| 'image/webp'`	the source’s	The type Save and Share write.
`outputQuality`	`number` (0 to 100)	`90`	The JPEG and WebP quality.

Either cap alone limits its own side. Both fit the output inside both. The ratio is kept, and the output is never enlarged by a cap.
The output never goes past 16.7 MP.
A source that isn’t JPEG, PNG or WebP (HEIC, AVIF, GIF…) saves as PNG unless you set outputType.
The file keeps the source’s name with the output’s extension, or image.<ext> when it has none.

Large Photos

How photos over 16.7 MP are handled.

Props

Every prop, with types and defaults.

Get Started

Frameworks

Ways to Show It

Features

Customization

Saving

Resources

What the User Can Do

Open at a Ratio

Lock a Ratio

Ratios

Output Size and Type

Large Photos

Props

​What the User Can Do

​Open at a Ratio

​Lock a Ratio

​Ratios

​Output Size and Type

Large Photos

Props

What the User Can Do

Open at a Ratio

Lock a Ratio

Ratios

Output Size and Type