EditState

EditState holds every edit, so the same photo reopens exactly as it was saved, every edit still editable.

onProcess: ({ dest, state }: { dest: File; state: EditState }) => void;
state: EditState | PinturaState | null;

Example

state.json

{
	"version": 3,
	"crop": { "x": 750, "y": 562.5, "width": 2500, "height": 1875, "aspectRatio": 1.3333333333333333, "scale": 160, "intent": { "x": 750, "y": 562.5, "width": 2500, "height": 1875 } },
	"rotation": -2.5,
	"flipX": true,
	"flipY": false,
	"adjustments": { "blackPoint": 0, "brightness": 0, "brilliance": 0, "contrast": 0, "exposure": 20, "highlights": 0, "saturation": 0, "shadows": 35, "sharpness": 0, "vibrance": 0, "vignette": 0, "warmth": -10 },
	"auto": null,
	"filter": { "id": "VIVID_WARM", "intensity": 80 },
	"frame": { "style": "POLAROID", "color": "#1a1a1a" },
	"obfuscation": [{ "x": 10, "y": 20, "width": 200, "height": 120, "angle": 0, "shape": "ELLIPSE", "style": "PIXELATE", "strength": 60, "color": "#000000" }],
	"annotations": [],
	"annotationList": null,
	"size": { "width": 1080, "height": 810 },
	"marks": { "signature": {}, "watermark": {} }
}

How It Is Written

Every field is written, a default’s too: no turn is 0, no flip false, Auto, the filter, the frame and the list are null while off, no areas or annotations are [], an area’s or an annotation’s angle is 0 when it has no turn. A default changed in a later version never changes a state saved before it.
Any field may be left out when you write a state yourself. A field left out reads as its default, so a hand-written state can stay short. Only version and crop are required.
In the units the screen shows: adjustments −100 to 100 (Sharpness 0 to 100), intensity and strength 0 to 100, rotation in degrees.
Geometry in working px: the px of the size the editor works the photo at, onLoad’s size. That is the photo’s own size up to 16.7 MP, and its working copy’s past it.
Rounded without moving a px: dragged geometry keeps 6 decimals and the ratio is written whole.

Storing It

The state is plain JSON. Store it beside the file onProcess hands back, and pass it to state with the same photo to reopen the edit:

upload.ts

import type { EditState } from '@embededitor/full/react';

const upload = async ({ dest, state }: { dest: File; state: EditState }) => {
	const body = new FormData();

	body.append('file', dest);
	body.append('state', JSON.stringify(state));
	await fetch('/api/photos', { body, method: 'POST' });
};

A state with another version, a value out of range or more than 64 areas is INVALID_STATE.

Fields

required

The shape’s version. The editor writes and reads 3. A state with another version is INVALID_STATE. A state with no version is read as a Pintura state.

object

required

The crop, in working px, and its ratio.

Show properties

number

The left edge.

number

The top edge.

number

The width, above 0.

number

The height, above 0.

number | null

The ratio, width / height. null while free.

number

The Scale of the user’s crop (intent), in %: 100 is the photo’s largest window of the crop’s ratio. Written for you to read; the editor reopens from intent.

{ x: number; y: number; width: number; height: number }

The user’s crop: the window they chose, unrounded, which no angle changes. The crop is what the photo turned by rotation holds of it, so straightening back to 0° gives it back. Left out, the crop is taken as the user’s crop; one that no longer gives crop at rotation (you changed either) is ignored the same way.

number

The turn, in degrees: its quarter turn kept within −180° to 180°, the straightening on top of it, so four turns write none. Left out, 0.

boolean

Mirrored left to right. Left out, false.

boolean

Mirrored top to bottom. Left out, false.

object

The adjustments set by hand, each −100 to 100 (sharpness 0 to 100). One left out is at 0.

Show properties

number

object | null

Auto while it is on, null while off. It keeps the numbers the photo’s analysis gave, so a reopened photo draws from them without analyzing it again, and a later change to Auto never changes a saved edit.

Show properties

number

Its ruler, −100 to 100.

number

The photo’s default amount, where Auto turns on, above 0 and up to 100.

number

Levels’ black point, 0 to 1.

number

Levels’ white point, 0 to 1.

number

The photo’s middle, 0 to 1, between black and white.

number

Where the middle goes, above 0 and up to 1.

number

The fill light, 0 to 1.

number

The S-curve’s strength, 0 to 1.

number

The color gain, above 0.

object | null

The filter and its intensity. null: none.

Show properties

string

VIVID, VIVID_WARM, VIVID_COOL, DRAMATIC, DRAMATIC_WARM, DRAMATIC_COOL, MONO, SILVERTONE or NOIR.

number

0 to 100.

object | null

The frame and its color. null: none.

Show properties

string

MAT_SHARP, MAT_ROUND, LINE_SINGLE, LINE_MULTIPLE, EDGE_CROSS, EDGE_SEPARATE, EDGE_OVERLAP, CORNER_HOOKS, POLAROID, FILM, ROUND_CORNERS, GALLERY or PHOTO_CORNERS.

string

#rrggbb, always written (a white frame writes #ffffff). Left out, white.

object[]

The obfuscated areas, in working px. At most 64, as many as the Obfuscate tool draws. An area may reach past the photo’s edge: only the part over the photo is drawn.

Show properties

number

Its rect, in its own frame.

number

Its rect’s turn about its middle on the photo, in degrees, 2 decimals, in the sense rotation turns the photo. An area is born level on the screen (the photo’s turn and flips undone), then turns with the photo, and its rotate handle turns it. Left out, 0.

string

RECT, ROUNDED or ELLIPSE. Left out, RECT.

string

BLUR, PIXELATE or SOLID. Left out, BLUR.

number

0 to 100. Left out, 50.

string

A solid area’s color, #rrggbb (any #rgb or #rrggbb reads, saved as six lowercase digits). Left out, black.

object[]

The annotations: lines, rulers, texts and Numbers, shapes and lenses, in drawing order, a later one on top. Their points are in the same px as the crop. See Annotation fields.

object | null

The Numbers’ list, one block. null: no list. See Annotation fields.

{ width: number; height: number } | null

The output size, in output px. null while none is set: the crop draws at its own size. The output never passes 16.7 MP.

object

What the user changed of the host’s watermark and signature, never the image nor the host’s text. The editor writes both roles, each empty when nothing changed. A field a role leaves out is the host’s. A saved change for a mark the host no longer gives is kept and ignored.

Show properties

object

The watermark’s changes.

Show properties

number

The layout’s it shows in.

number

10 to 100.

'AUTO' | string

The color the user chose over the host’s: 'AUTO' or a lowercase hex. Back on the host’s own, it goes.

string

The font the user chose for a text mark over the host’s, by its slug ('pacifico'). Back on the host’s own, it goes.

string

The text the user wrote.

true

A free mark the user took out.

'GRID' | 'SINGLE'

The layout the user switched to. Left out while it is the host’s.

{ angle?, size?, spacing? }

What the user gave the grid, kept while the mark shows single.

{ angle?, size? }

What the user gave the single mark, kept while it shows as a grid.

object

The signature’s changes.

Show properties

number

As the user set them.

'AUTO' | string

As the watermark’s.

string

As the watermark’s.

string

The text the user wrote.

true

A free mark the user took out.

string

One of the 9 points: TOP_LEFT, TOP, TOP_RIGHT, LEFT, CENTER, RIGHT, BOTTOM_LEFT, BOTTOM or BOTTOM_RIGHT.

number

A free place instead of position: its center, 0 to 1 on the final photo. Never both.

Overview

Entry Points

Commands

Reference

Example

How It Is Written

Storing It

Fields

​Example

​How It Is Written

​Storing It

​Fields

Example

How It Is Written

Storing It

Fields