Inputs

Image Cropper

Crop an image by moving the image, not the box.

Full reference: every prop and when to use it →

Walkthrough

1. Basic

The window stands still and the picture moves under it — drag it, scroll to zoom, pinch on a touchscreen. It is constrained, so an empty corner inside the frame is not a thing that can happen.

Loading…

1<script lang="ts">2	import { ImageCropper } from 'omaris';34	/** A drawn picture, so the demo needs no network. */5	const PHOTO = `data:image/svg+xml;utf8,${encodeURIComponent(`6		<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800">7			<defs>8				<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">9					<stop offset="0%" stop-color="#1b3a5c"/>10					<stop offset="60%" stop-color="#e9825c"/>11					<stop offset="100%" stop-color="#f3c98b"/>12				</linearGradient>13			</defs>14			<rect width="1200" height="800" fill="url(#sky)"/>15			<circle cx="820" cy="300" r="90" fill="#fff3d6"/>16			<path d="M0 620 L260 460 L470 620 Z" fill="#12283d"/>17			<path d="M330 620 L620 400 L900 620 Z" fill="#0d1f30"/>18			<rect y="620" width="1200" height="180" fill="#08151f"/>19		</svg>`)}`;20</script>2122<ImageCropper src={PHOTO} alt="Sunset over hills" aspect={16 / 9} class="w-full max-w-lg" />

2. Ratios

ratios puts a row of aspect presets under the stage and rebinds aspect — pick one and the window reshapes, the picture re-covers it, nothing else moves. resizable adds grips to the window, so a locked ratio can still be scaled and a free one shaped by hand.

Loading…

aspect: 1.78

1<script lang="ts">2	import { ImageCropper, Text, type ImageCropperAspect } from 'omaris';34	const PHOTO = `data:image/svg+xml;utf8,${encodeURIComponent(`5		<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800">6			<rect width="1200" height="800" fill="#12233b"/>7			<circle cx="880" cy="240" r="110" fill="#fbbf24"/>8			<path d="M0 640 L300 420 L560 640 Z" fill="#1f4d3f"/>9			<path d="M380 640 L700 380 L1000 640 Z" fill="#14332b"/>10			<rect y="640" width="1200" height="160" fill="#0a1a26"/>11		</svg>`)}`;1213	let aspect = $state<ImageCropperAspect>(16 / 9);14</script>1516<div class="flex w-full max-w-lg flex-col gap-2">17	<ImageCropper18		bind:aspect19		src={PHOTO}20		alt="Sunset over hills"21		ratios22		resizable23		height={260}24		controls={['zoom', 'reset']}25	/>2627	<Text variant="label-sm" tone="muted" font="mono">28		aspect: {aspect === 'free' ? 'free' : aspect.toFixed(2)}29	</Text>30</div>

3. Exporting

The export replays exactly the transform you see, at whatever output size you name — so what lands in the blob is what was in the frame. onchange reports the rectangle in source pixels every time the crop settles.

Loading…

1<script lang="ts">2	import { Button, ImageCropper, Text, type CropRect } from 'omaris';34	const PHOTO = `data:image/svg+xml;utf8,${encodeURIComponent(`5		<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900">6			<rect width="900" height="900" fill="#0f172a"/>7			<circle cx="450" cy="380" r="180" fill="#38bdf8"/>8			<rect x="180" y="600" width="540" height="180" rx="40" fill="#f472b6"/>9		</svg>`)}`;1011	let cropper = $state<ImageCropper | null>(null);12	let output = $state<string | null>(null);13	let rect = $state<CropRect | null>(null);14</script>1516<div class="flex w-full flex-col items-center gap-3">17	<ImageCropper18		bind:this={cropper}19		src={PHOTO}20		alt="Avatar source"21		aspect={1}22		shape="circle"23		onchange={(next) => (rect = next)}24		class="w-full max-w-sm"25	/>2627	<div class="flex items-center gap-3">28		<Button29			size="sm"30			onclick={() => (output = cropper?.toDataURL('image/png', undefined, 160) ?? null)}31		>32			Export at 160px33		</Button>34		{#if output}35			<img src={output} alt="The exported crop" class="size-16 rounded-full" />36		{/if}37	</div>3839	{#if rect}40		<Text variant="label-sm" tone="muted" font="mono">41			{Math.round(rect.width)} × {Math.round(rect.height)} at {Math.round(rect.x)}, {Math.round(42				rect.y43			)}44		</Text>45	{/if}46</div>

4. Adjusting

controls takes the list you want, so straighten adds a fine-angle slider next to the quarter-turn button. Any angle constrains as tightly as a right one: tilt the picture and it grows to keep the window full.

Loading…

0°

1<script lang="ts">2	import { ImageCropper, Text } from 'omaris';34	const PHOTO = `data:image/svg+xml;utf8,${encodeURIComponent(`5		<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="700">6			<rect width="1000" height="700" fill="#0f172a"/>7			<rect x="80" y="120" width="380" height="460" rx="24" fill="#38bdf8"/>8			<rect x="540" y="240" width="380" height="340" rx="24" fill="#f472b6"/>9			<path d="M0 620 L1000 560" stroke="#e2e8f0" stroke-width="8"/>10		</svg>`)}`;1112	let rotation = $state(0);13	let flipX = $state(false);14</script>1516<div class="flex w-full max-w-md flex-col gap-2">17	<ImageCropper18		bind:rotation19		bind:flipX20		src={PHOTO}21		alt="Two blocks on a horizon"22		aspect={4 / 3}23		height={240}24		controls={['zoom', 'straighten', 'rotate', 'flip', 'reset']}25	/>2627	<Text variant="label-sm" tone="muted" font="mono">28		{Math.round(rotation)}°{flipX ? ' · mirrored' : ''}29	</Text>30</div>

5. Overridden

height is a custom property, so classes.stage can replace it outright. controls={false} hands the zoom to a slider of your own through the bindable zoom, and children puts content over the stage.

Loading…

Cover photo

Zoom

1<script lang="ts">2	import { ImageCropper, Slider, Text } from 'omaris';34	const PHOTO = `data:image/svg+xml;utf8,${encodeURIComponent(`5		<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600">6			<rect width="1000" height="600" fill="#0b3d2e"/>7			<circle cx="300" cy="220" r="120" fill="#facc15"/>8			<path d="M0 520 L340 300 L700 520 Z" fill="#065f46"/>9			<path d="M420 520 L760 340 L1000 520 Z" fill="#064e3b"/>10		</svg>`)}`;1112	let zoom = $state(1.4);13</script>1415<div class="flex w-full max-w-md flex-col gap-3">16	<ImageCropper17		src={PHOTO}18		alt="Hills"19		aspect={3 / 1}20		bind:zoom21		grid={false}22		controls={false}23		inset={0.94}24		height="auto"25		classes={{ stage: 'h-40 rounded-shape-lg', window: 'rounded-shape-md' }}26	>27		<Text variant="label-sm" class="absolute start-3 top-3 text-white/80">Cover photo</Text>28	</ImageCropper>2930	<Slider bind:value={zoom} min={1} max={4} step={0.05} label="Zoom" />31</div>