> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embededitor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# processImage()

> Crop, resize and convert an image with no UI, with the same output rules as the editor's Save.

`processImage` crops, resizes and converts an image with no editor on screen.

```ts theme={"dark"}
const processImage: (
	src: NonNullable<EmbedEditorProps['src']>,
	options?: ProcessImageOptions
) => Promise<{ dest: File; state: EditState }>;
```

Available in both entries. It draws the whole image (or `crop`, or the largest centered window of `aspectRatio`) at `targetSize`, with the same output rules as Save, so never more than 16.7 MP.

## Parameters

**src** `string | File | Blob | ArrayBuffer | Uint8Array | HTMLImageElement | HTMLCanvasElement | ImageBitmap` *required*

The image. It takes everything the editor's `src` prop takes, except `null`: a URL (`http(s):`, `data:`, `blob:`), a File or Blob, its bytes, an `<img>`, a canvas or an ImageBitmap.

## Options

Every option is optional. An option it can't take rejects with `INVALID_PROPS` before anything loads.

**aspectRatio** `number | null`

With no `crop`, the ratio (width / height, above 0) of the crop: its largest centered window. `null` or absent: the whole image. With a `crop`, it only decides whether the returned state keeps a ratio: it does when `crop` already has this ratio, and opens free otherwise.

**crop** `Rect`

The crop, `{ x, y, width, height }`, in the file's own px. It is held inside the image: one past an edge moves in, one larger than the image shrinks at its ratio.

**targetSize** `Size` (default: the crop's own size)

The box the crop is drawn into, `{ width, height }`, in output px, at the crop's ratio. It may enlarge a small crop. The output never passes 16,777,216 px (2^24), whatever is asked.

**maxWidth** `number`

The output's largest width, in px (1 or more). The ratio is kept, and it never enlarges the image.

**maxHeight** `number`

The output's largest height, in px (1 or more). The ratio is kept, and it never enlarges the image.

**outputType** `'image/jpeg' | 'image/png' | 'image/webp'` (default: the source's)

The type written: the source's when it is one of these, a PNG otherwise.

**outputQuality** `number` (default: 90)

The JPEG and WebP quality, 0 to 100.

**watermark** `EmbedEditorWatermark | null` (default: null)

**Full edition.** The host's watermark, drawn at its own values. A fixed or required one that can't load rejects with `MARK_FAILED`; a free one is left out. See [Props](https://docs.embededitor.com/api-reference/props.md#branding).

**signature** `EmbedEditorSignature | null` (default: null)

**Full edition.** The host's signature, drawn at its own values. A fixed or required one that can't load rejects with `MARK_FAILED`; a free one is left out.

## Returns

A promise that resolves to the file and the state it was made with, or rejects with an [EmbedEditorError](https://docs.embededitor.com/api-reference/errors.md): `INVALID_PROPS`, `LOAD_FAILED`, `UNSUPPORTED_FORMAT`, `MARK_FAILED` or `EXPORT_FAILED`.

**dest** `File`

The processed image.

**state** `EditState`

The edits it was made with, ready for the editor's `state` prop. Given both `crop` and `aspectRatio`, it keeps `aspectRatio` only when `crop` already has that ratio, so reopening it never refits the crop. See [EditState](https://docs.embededitor.com/api-reference/state.md).

## Units

A photo over 16.7 MP is worked at a smaller copy, so the units differ:

* `crop` is in the file's own px, and lands on the same region of the copy.
* The `state` it resolves to is in the copy's px, ready for the editor's `state` prop.

> [!WARNING]
>
> Don't pass the returned state's `crop` back as `crop`: past 16.7 MP, those px aren't the file's.

## Example

```ts thumbnail.ts theme={"dark"}
import { processImage } from '@embededitor/full/react';

const thumbnail = async (file: File): Promise<File> => {
	const { dest } = await processImage(file, {
		aspectRatio: 1,
		maxWidth: 512,
		outputQuality: 80,
		outputType: 'image/webp'
	});

	return dest;
};
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.