Svelte CropperJS

An SSR ready Svelte wrapper for CropperJS. Please refer to the original CropperJS documentation for detailed usage instructions.

Installation

npm install -D @eslym/svelte-cropperjs

yarn add -D @eslym/svelte-cropperjs

bun add -d @eslym/svelte-cropperjs

Example

<script lang="ts">
    import type { CropperSelection } from '@cropper/elements';
    import * as Cropper from '@eslym/svelte-cropperjs';

    let cropper: CropperSelection = $state(null!);

    async function crop() {
        const canvas = await cropper.$toCanvas({ width: 256, height: 256 });
        const blob = await new Promise<Blob>((resolve) =>
            canvas.toBlob((b) => resolve(b!), 'image/png')
        );
        const u = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = u;
        a.download = 'cropped-image.png';
        a.click();
        URL.revokeObjectURL(u);
    }
</script>

<div class="grid grid-cols-[1fr_auto]">
    <Cropper.Canvas background class="h-dvh w-full">
        <Cropper.Image
            src="/example.png"
            alt="Example Image"
            rotatable
            scalable
            skewable
            translatable
        />
        <Cropper.Shade />
        <Cropper.Handle action="move" plain />
        <Cropper.Selection
            id="selection"
            bind:element={cropper}
            aspect-ratio={1}
            initial-aspect-ratio={1}
            initial-coverage={1}
            movable
            resizable
        >
            <Cropper.Grid bordered covered />
            <Cropper.Crosshair centered themeColor="#0000FF80" />
            <Cropper.Handle action="move" plain />
            <Cropper.Handle action="n-resize" />
            <Cropper.Handle action="e-resize" />
            <Cropper.Handle action="s-resize" />
            <Cropper.Handle action="w-resize" />
            <Cropper.Handle action="ne-resize" />
            <Cropper.Handle action="nw-resize" />
            <Cropper.Handle action="se-resize" />
            <Cropper.Handle action="sw-resize" />
        </Cropper.Selection>
    </Cropper.Canvas>
    <div class="flex w-80 flex-col gap-2 p-4">
        <h2 class="mb-4 text-lg font-bold">Svelte CropperJS</h2>
        <Cropper.Viewer selection="#selection" class="border" />
        <Cropper.Viewer selection="#selection" class="rounded-full border" />
        <button
            onclick={crop}
            class="col-span-2 m-4 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
        >
            Crop & Download
        </button>
    </div>
</div>