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).

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

Events

on:cropcomplete

This event is the one you should use to save the cropped area of the image. 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