Svelte Easy Crop
A Svelte component to crop images with easy interactions
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
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: absoluteto take the full space of its parent. Thus, you need to wrap it with an element that usesposition: relativeor 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. |
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:
percent: coordinates and dimensions of the cropped area in percentage of the image dimensionpixels: 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
