Examples

Real, runnable HTML files — not just snippets.

Each one loads ../dist/kiri.min.js + ../dist/kiri.min.css directly — no bundler, no build step. Open any of them straight in a browser, or click through from here.

• Basic crop

  The minimal setup: load an image, drag/zoom/rotate, export.

• Circle & rounded-rectangle crop

  Non-rectangle frames, exported with real transparent corners — not just a visual overlay.

• Filters

  Brightness/contrast/saturation sliders plus grayscale/sepia toggles, live.

• Batch cropping

  Step through multiple images with one shared cropper, capturing each one.

• Built-in zoom slider

  The four zoomerPosition placements, side by side.

• Resizable frame

  Drag the frame's corner handle to resize it live.

• Upload

  Exports the crop and POSTs it as FormData to a URL you provide.

• Crop region

  Get the crop mapped back onto the original image's own pixels, for server-side cropping instead of uploading a re-encoded image.