Events
Kiri has one event today: "change".
| Event | Fires when | Callback receives |
|---|---|---|
"change" |
Any time the state updates: dragging, zooming (wheel/pinch/slider),
rotating, flipping, resizing the frame, or setFilters().
Also fires once after load() resolves. |
The same KiriState snapshot getState()
returns: { zoom, offset, rotation, flip, filters }. |
Subscribing
cropper.on("change", (state) => {
console.log(state.zoom);
});
// later, if needed:
cropper.off("change", myHandler);A note on frequency
"change" fires on every pointermove while
dragging or every wheel tick while zooming — not just once at the end of a
gesture. If you're doing something expensive inside the handler (like
calling export(), which does a full canvas render), debounce
it rather than running on every single event:
let timer;
cropper.on("change", () => {
clearTimeout(timer);
timer = setTimeout(async () => {
const blob = await cropper.export({ type: "blob" });
// ...
}, 200);
});