Image Cropper

#Basic usage

image-cropper/basic Vue React

image-cropper/basic.vue

<script setup lang="ts">
import { ImageCropper } from "@bysages/vue";
</script>

<template>
  <ImageCropper.Root>
    <ImageCropper.Viewport>
      <ImageCropper.Image
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
        alt="A mountain valley under morning light"
      />
      <ImageCropper.Selection>
        <ImageCropper.Handle
          v-for="position in ['nw', 'ne', 'se', 'sw']"
          :key="position"
          :position="position"
        >
          <div />
        </ImageCropper.Handle>
        <ImageCropper.Grid axis="horizontal" />
        <ImageCropper.Grid axis="vertical" />
      </ImageCropper.Selection>
    </ImageCropper.Viewport>
  </ImageCropper.Root>
</template>

#Props

#Grid

Prop	Type	Default	Description
`axis`	`"horizontal" \| "vertical"`		The axis of the grid lines to display

#Handle

Prop	Type	Default	Description
`position`	`HandlePosition`		The position of the handle

#Image

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`aspectRatio`	`number`		The aspect ratio to maintain for the crop area (width / height). For example, an aspect ratio of 16 / 9 will maintain a width to height ratio of 16:9. If not provided, the crop area can be freely resized.
`cropShape`	`'rectangle' \| 'circle'`	`"rectangle"`	The shape of the crop area.
`defaultFlip`	`imageCropper.FlipState`	`{ horizontal: false, vertical: false }`	The initial flip state to apply to the image.
`defaultRotation`	`number`	`0`	The initial rotation to apply to the image in degrees.
`defaultZoom`	`number`	`1`	The initial zoom factor to apply to the image.
`fixedCropArea`	`boolean`	`false`	Whether the crop area is fixed in size and position.
`flip`	`imageCropper.FlipState`		The controlled flip state of the image.
`ids`	`imageCropper.ElementIds`		The ids of the image cropper elements
`initialCrop`	`Rect`		The initial rectangle of the crop area. If not provided, a smart default will be computed based on viewport size and aspect ratio.
`maxHeight`	`number`	`Infinity`	The maximum height of the crop area
`maxWidth`	`number`	`Infinity`	The maximum width of the crop area
`maxZoom`	`number`	`5`	The maximum zoom factor allowed.
`minHeight`	`number`	`40`	The minimum height of the crop area
`minWidth`	`number`	`40`	The minimum width of the crop area
`minZoom`	`number`	`1`	The minimum zoom factor allowed.
`nudgeStep`	`number`	`1`	The base nudge step for keyboard arrow keys (in pixels).
`nudgeStepCtrl`	`number`	`50`	The nudge step when Ctrl/Cmd key is held (in pixels).
`nudgeStepShift`	`number`	`10`	The nudge step when Shift key is held (in pixels).
`rotation`	`number`		The controlled rotation of the image in degrees (0 - 360).
`translations`	`imageCropper.IntlTranslations`		Specifies the localized strings that identify accessibility elements and their states.
`zoom`	`number`		The controlled zoom level of the image.
`zoomSensitivity`	`number`	`2`	Controls how responsive pinch-to-zoom is.
`zoomStep`	`number`	`0.1`	The amount of zoom applied per wheel step.

#Selection

A styled part — no props of its own; it takes the anatomy's shared styling.

#Viewport

A styled part — no props of its own; it takes the anatomy's shared styling.