Playground

Every option, live. Changing a constructor option rebuilds the cropper below.

Frame

Only matters when Shape is rounded-rectangle.

Only matters while Resizable is on — dragging a corner handle keeps the frame's width:height ratio fixed instead of letting each axis resize independently.

Inverts the interaction model: the image is fixed (no pan/zoom — the Center button and mouse wheel/pinch zoom stop doing anything) and dragging or using the arrow keys moves the frame over it instead. Combine with Resizable to also resize the frame in place.

Zoom
Behavior

Enables the Rotate button in the preview panel →

Enables the Flip buttons in the preview panel →

Not a live action — only affects photos loaded via the file input above (their embedded EXIF rotation/flip data). Try uploading a JPEG straight from a phone camera with this on vs. off.

Not a live action either — it changes how the stage is sized at construction time. Toggle it and watch the stage box itself resize on rebuild (compare the JSON dump below too).

Filters (live — no rebuild)

Live state (updates as you drag/zoom/rotate/flip):


      

getCropRegion() — the crop mapped back into the original image's own pixel coordinates:

Click "Get crop region" above.

Constructor options currently applied: