svelte-easy-crop

A Svelte component to crop images with easy interactions

This is a rewrite of react-easy-crop (https://github.com/valentinh/react-easy-crop).

ℹ️ The minimum supported Svelte version is v5. If you are still on an older version, you need to use the 3.x.x versions of svelte-easy-crop

Demo

• Basic example

Features

• Supports drag and zoom interactions
• Provides crop dimensions as pixels and percentages
• Supports any images format (JPEG, PNG, even GIF) as url or base 64 string
• Mobile friendly

Installation

yarn add svelte-easy-crop

or

npm install svelte-easy-crop --save

Basic usage

The Cropper is styled with position: absolute to take the full space of its parent. Thus, you need to wrap it with an element that uses position: relative or the Cropper will fill the whole page.

<script>
  import Cropper from 'svelte-easy-crop'

  let image = '/images/dog.jpeg'
  let crop = { x: 0, y: 0 }
  let zoom = 1
</script>

<Cropper
 {image}
 bind:crop
 bind:zoom
 on:cropcomplete={e => console.log(e.detail)}
/>

Props

| Prop | Type | Required | Description | | :----------------- | :---------------------------------- | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | image | string | ✓ | The image to be cropped. | | crop | { x: number, y: number } | ✓ | Position of the image. { x: 0, y: 0 } will center the image under the cropper. | | zoom | number | | Zoom of the image between minZoom and maxZoom. Defaults to 1. | | aspect | number | | Aspect of the cropper. The value is the ratio between its width and its height. The default value is 4/3 | | minZoom | number | | Minimum zoom of the image. Defaults to 1. | | maxZoom | number | | Maximum zoom of the image. Defaults to 3. | | cropShape | 'rect' | 'round' | | Shape of the crop area. Defaults to 'rect'. | | cropSize | { width: number, height: number } | | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the aspect prop and the image size. | | showGrid | boolean | | Whether to show or not the grid (third-lines). Defaults to true. | | zoomSpeed | number | | Multiplies the value by which the zoom changes. Defaults to 1. | | crossOrigin | string | | Allows setting the crossOrigin attribute on the image. | | restrictPosition | boolean | | Whether the position of the image should be restricted to the boundaries of the cropper. Useful setting in case of zoom < 1 or if the cropper should preserve all image content while forcing a specific aspect ratio for image throughout the application. Example: https://codesandbox.io/s/1rmqky233q. | | oncropcomplete | function(details) | | This callback is the one you should use to save the cropped area of the image. |

Callbacks

oncropcomplete

<Cropper
  {image}
  bind:crop
  bind:zoom
  oncropcomplete={(e) => console.log(e)}
/>

The detail property is an object with 2 values:

1. percent: coordinates and dimensions of the cropped area in percentage of the image dimension
2. pixels: coordinates and dimensions of the cropped area in pixels.

Both arguments have the following shape:

const area = {
  x: number, // x/y are the coordinates of the top/left corner of the cropped area
  y: number,
  width: number, // width of the cropped area
  height: number, // height of the cropped area
}

Development

yarn
yarn dev

Now, open http://localhost:5000 and start hacking!

License

MIT