Manipulation and state

Croppa exposes the same operations users perform with mouse and touch as imperative methods.

Move and zoom

this.croppa.move({ x: -20, y: 10 })
this.croppa.zoomIn()
this.croppa.zoomOut()

Directional convenience methods are also available: moveUpwards, moveDownwards, moveLeftwards, and moveRightwards.

Manipulation methodsMove, zoom, rotate, and flip while reading the live crop metadata.

Open demo ↗

Keep the viewport covered

prevent-white-space constrains movement and zoom so the image continues to cover the crop canvas.

<croppa v-model="croppa" prevent-white-space></croppa>

Rotate and flip

this.croppa.rotate()    // 90° clockwise
this.croppa.rotate(-1)  // 90° counter-clockwise
this.croppa.flipX()
this.croppa.flipY()

Save and restore metadata

getMetadata() returns the current v1 transform state:

const metadata = this.croppa.getMetadata()

// Later
this.croppa.applyMetadata(metadata)

The returned fields are startX, startY, scale, and orientation. They are v1 canvas-oriented metadata; if the viewport geometry changes, do not assume the same values represent a framework-independent crop rectangle.

Metadata round-tripSave a crop, modify it, and apply the stored metadata again.

Open demo ↗

Passive previews

Two Croppa instances can share the same v-model object. Set passive on the second instance to make it a non-interactive synchronized preview.

Passive synchronized previewThe smaller cropper mirrors the editable cropper through the shared v-model object.

Open demo ↗

Passive mode is a v1 implementation detail based on shared component state. v2 is moving to an explicit serializable state model instead.