Image Crop

A canvas-based component for cropping images with zoom and pan support, providing a real-time cropped preview.

Props

Prop	Type	Default	Description
`sourceImage`	`ImageBitmap`	`required`	The source ImageBitmap to be cropped.
`aspectRatio`	`{ x: number, y: number }`	`required`	Fixed aspect ratio for the crop area.
`resultImage`	`string`	`undefined`	The base64 encoded cropped image result. Supports $bindable.
`zoom`	`number`	`1`	Zoom level for the image.
`pan`	`{ x: number, y: number }`	`{ x: 0, y: 0 }`	Pan coordinates (x, y) for the image.
`padding`	`number`	`0`	Padding in pixels around the crop area within the canvas.
`shape`	`'rectangle' \| 'circle'`	`'rectangle'`	The shape of the crop area.
`overlayColor`	`string`	`'rgba(0, 0, 0, 0.5)'`	The color of the overlay around the crop area.
`variant`	`string`	`''`	Custom variant class for theming.
`componentId`	`string`	`undefined`	The unique identifier for the component wrapper.

Standard rectangular cropping with zoom, pan, and padding controls.

Rectangle

Loading image bitmap...

<script>

  import { ImageCrop } from 'fluid-ui-svelte/components';

  import { onMount } from 'svelte';

  let bitmap = $state<ImageBitmap>();

  onMount(async () => {

    const response = await fetch('https://picsum.photos/id/10/800/600');

    const blob = await response.blob();

    bitmap = await createImageBitmap(blob);

});

</script>

{#if bitmap}

  <ImageCrop sourceImage={bitmap} aspectRatio={{ x: 16, y: 9 }} />

{/if}

Select a local image file to crop. Supports custom aspect ratios and colors.

Rectangle

Please select an image to start cropping

<script>

  import { ImageCrop } from 'fluid-ui-svelte/components';

  let uploadedBitmap = $state<ImageBitmap>();

  let resultImage = $state<string>();

  async function handleFileChange(event) {

    const file = event.target.files?.[0];

    if (file) {

      const blob = new Blob([file], { type: file.type });

      uploadedBitmap = await createImageBitmap(blob);

</script>

<input type="file" accept="image/*" onchange={handleFileChange} />

{#if uploadedBitmap}

  <ImageCrop

    sourceImage={uploadedBitmap}

    aspectRatio={{ x: 16, y: 9 }}

    bind:resultImage

/>

  {#if resultImage}

    <img src={resultImage} alt="Cropped result" />

  {/if}

{/if}