@cloudparker/easy-cropperjs-svelte

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 EasyCropperjs from '@cloudparker/easy-cropperjs-svelte';

	
	let easyCropperjsRef: EasyCropperjs | null = $state(null);

	let clientWidth: number = $state(0);
	let file: File | null = $state(null);

	async function handleCrop() {
		let data = await easyCropperjsRef?.crop({
			outputWidth: 300,
			outputFormat: 'webp',
			outputQuality: 0.6,
			outputType: 'file'
		});
		console.log('crop', data);
	}

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

	async function getFile(url: string) {
		var fileName = url.split('/').pop() || 'file.png';
		let blob = await (await fetch(url)).blob();
		var file = new File([blob], fileName, { type: blob.type });
		return file;
	}

	async function init() {
		file = await getFile('/sky-1.webp');
	}

	$effect(() => {
		init();
	});
</script>

<div>
	<h1>Easy Cropperjs Svelte Demo</h1>
	<div style="height: 500px;">
		{#if file}
			<EasyCropperjs
				bind:this={easyCropperjsRef}
				outputAspectRatio={1}
				inputImageFile={file}
				onCrop={handleCropResult}
			/>
		{/if}
	</div>
	<button onclick={handleCrop} style="margin-top:16px;">Crop</button>
</div>