svelte-easy-crop
v4.0.1
Published
A Svelte component to crop images with easy interactions
Downloads
26,091
Maintainers
Readme
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
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 usesposition: 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:
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!