An image cropper for Svelte 5 that fits your site instead of the other way around. Rotation, zoom, smooth transitions, automatic zoom to the stencil and much more come included, and every piece can be restyled or swapped out.
Includes code derived from Norserium's MIT-licensed react-advanced-cropper and is built on the advanced-cropper core. Not affiliated with the Advanced Cropper project.
Use the cropper as it ships, or replace any part of it: the stencil, the handlers, the image gestures, the wrapper. Both the look and the behaviour are open to change.
Pinch to zoom, drag to move and resize: touch, mouse and wheel input all work out of the box, and the cropper adapts when its container changes size.
Get the cropped area as a canvas, ready to upload or preview, or just the coordinates within the original image to crop it on your server.
Fix the aspect ratio or allow a range, set minimum and maximum sizes, and choose how the image is kept within the stencil or the visible area.
Under the hood this is closer to a toolkit for building croppers than a single widget, yet the basic case takes a few lines. Install the package, import the styles once, and drop the component into your page.
npm install svelte-advanced-cropper Requires Svelte ^5.40.
<script lang="ts">
import { Cropper, RectangleStencil, type CropperInstance } from 'svelte-advanced-cropper';
import 'svelte-advanced-cropper/style.css';
import { image } from '#site/paths.ts';
let cropper: CropperInstance | undefined = $state();
const coordinates = $derived(cropper?.getCoordinates());
</script>
<Cropper bind:this={cropper} src={image('calico-cat.jpg')} style="height: 360px">
<RectangleStencil aspectRatio={16 / 9} />
</Cropper>
{#if coordinates}
<p>{coordinates.width} × {coordinates.height} pixels</p>
{/if}
<button type="button" disabled={!coordinates} onclick={() => cropper?.rotateImage(90)}>
Rotate
</button>The documentation has many more examples for everyday tasks and unusual ones alike, from the stencil guide to the defaults and restrictions.