Keep edits and open them again

Everything your visitor changes is kept in one object, imageState. Save it next to the original file and you can open the editor later with the same edits, ready to change again, or apply them without the editor at all.

Read the edits

The process event hands you imageState with the file. You can also read editor.imageState at any time, or listen for update, which is sent with it on every change.

editor.on("process", async ({ src, dest, imageState }) => {
  await save({
    original: src,
    edited: dest,
    edits: JSON.stringify(imageState),
  })
})

Open them again

Pass the saved state with the original file. The editor opens with every edit in place, and Undo starts from there.

appendDefaultEditor("#editor", {
  src: originalFile,
  imageState: JSON.parse(saved.edits),
})

// Or in an editor that's already there:
editor.loadImage(originalFile, JSON.parse(saved.edits))

What's in it

{
  crop,            // { x, y, width, height }, in pixels
  cropAspectRatio, // the shape the crop is held to, or undefined
  rotation,        // in radians: quarter turns and straightening
  flipX, flipY,    // flipped across, flipped up and down
  redaction,       // the parts pixelated or blurred, in the photo's pixels
  colorMatrix,     // black and white, inverted colors
  targetSize,      // { width, height } from Resize
  // videos
  trim,            // the parts kept, as [from, to] fractions of the length
  volume,          // 0 when the sound was taken out
}

The crop is a box in the turned picture, so keep the state whole: set imageState all at once rather than mixing parts of two.

Set edits from code

Each field is also a property on the editor, named with image in front: imageCrop, imageRotation, imageFlipX, imageTrim, imageVolume and so on. Setting one changes that edit straight away. You can pass them as options too.

// Open every photo turned a quarter to the right, cropped square.
appendDefaultEditor("#editor", {
  src: file,
  imageRotation: Math.PI / 2,
  imageCropAspectRatio: 1,
})

// Later, take the sound out of the video.
editor.imageVolume = 0

These read-only properties tell you about the open file: imageFile, imageSize, imageAspectRatio, imageCropSize, imageDuration (videos, in seconds), imageLoadState and imageProcessState.

Undo and redo from code

editor.history holds every step. A drag counts as one step once it settles.

editor.history.undo()
editor.history.redo()
await editor.history.revert() // back to the file as it opened
editor.history.length // how many steps
editor.history.index // which one is showing

history.get() returns every step's state and history.set(states) restores them, so you can keep a visitor's undo steps across visits too. willRevert() runs before Revert; return false to keep the edits.