easy-cropperjs-svelte

Use cropper js in svelte through CDN cropperjs library.

Install

npm i @cloudparker/easy-cropperjs-svelte --save-dev

Screenshot

Usage

<script lang="ts">
    import { BROWSER } from 'esm-env';
    import EasyCropperjs from '@cloudparker/easy-cropperjs-svelte';
    import { onMount } from 'svelte';

    let image: HTMLImageElement;
    let easyCropperjsRef: EasyCropperjs;

    function handleCrop() {
        easyCropperjsRef.crop({ width: 300, format: 'png', quality: 0.8, blob: false });
    }

    function handleResult(ev: CustomEvent) {
        let base64ImageUrl: string = ev.detail;
        // User base64ImageUrl
    }

    onMount(() => {
        if (BROWSER) {
            image = new Image();
            image.src = '/wallpaper.jpg';
            image.alt = 'Picture';
        }
    });
</script>

<div>
    <h1>Easy Cropperjs Svelte Demo</h1>
    <div>
        <EasyCropperjs
            bind:this={easyCropperjsRef}
            width={500}
            height={400}
            aspectRatio={9/16}
            {image}
            on:result={handleResult}
        />
    </div>
    <button on:click={handleCrop}>Crop</button>
</div>