SvelteCropper

CropperJS component for Svelte.

Example

<script lang="ts">
    import { Cropper, type CropperInstance, type CropperDefaultProps } from "svelte-cropper"
    
    let cropper: CropperInstance | null = null
    
    let image_src = "https://svelte-cropper.vercel.app/ok.jpg"
    
    const cropper_props: CropperDefaultProps = {
        viewMode: 2, // necessary,
        // optional
        dragMode: "crop",
        initialAspectRatio: 1 // not reactive as cropper initializes on component mount
    }
    
</script>

<Cropper bind:cropper src={image_src} {cropper_props}/>

More examples

Demo

• SvelteCropper
• CropperJS

Instalation

pnpm add svelte-cropper

Options

• CropperJS Docs