Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Aspect Width over height. 1 is a square, 1.5 is 3:2.

Mode Free lets the box be any shape, ignoring the ratio.

Grid

Rotatable

Preview

Live Redraw the preview while the box is being dragged.

Max Zoom

import { createImageCropper } from '@devix-labs/image-cropper';
import '@devix-labs/image-cropper/styles.css';

createImageCropper(document.querySelector('#target'), {
  aspect: 1,
  mode: 'fixed',
  grid: true,
  rotatable: true,
  preview: true,
  live: true,
  maxZoom: 5
});

import { ImageCropper } from '@devix-labs/image-cropper/react';
import '@devix-labs/image-cropper/styles.css';

<ImageCropper
  aspect={1}
  mode="fixed"
  grid
  rotatable
  preview
  live
  maxZoom={5}
/>

<script setup>
import { ImageCropper } from '@devix-labs/image-cropper/vue';
import '@devix-labs/image-cropper/styles.css';
</script>

<template>
  <ImageCropper
  :aspect="1"
  mode="fixed"
  grid
  rotatable
  preview
  live
  :max-zoom="5"
/>
</template>

<script>
  import { imageCropper } from '@devix-labs/image-cropper/svelte';
  import '@devix-labs/image-cropper/styles.css';
</script>

<div use:imageCropper={{
  aspect: 1,
  mode: 'fixed',
  grid: true,
  rotatable: true,
  preview: true,
  live: true,
  maxZoom: 5
}} />

Every option here is in the documentation, along with the ones that are not worth a control.