1.0.5 • Published 10 months ago
@cloudparker/easy-cropperjs-svelte v1.0.5
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>