A Svelte component to crop images with easy interactions
npm install svelte-easy-cropA 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
[![version][version-badge]][package] [![Monthly downloads][npmstats-badge]][npmstats] ![gzip size][gzip-badge] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]
- 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
``shell`
yarn add svelte-easy-crop
or
`shell`
npm install svelte-easy-crop --save
> The Cropper is styled with position: absolute to take the full space of its parent.position: relative
> Thus, you need to wrap it with an element that uses or the Cropper will fill the whole page.
`jsx
bind:crop
bind:zoom
on:cropcomplete={e => console.log(e.detail)}
/>
`
| 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. |
`tsx`
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 dimensionpixels
1. : coordinates and dimensions of the cropped area in pixels.
Both arguments have the following shape:
`js`
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
}
`shell`
yarn
yarn dev
Now, open http://localhost:5000` and start hacking!
[npm]: https://www.npmjs.com/
[node]: https://nodejs.org
[version-badge]: https://img.shields.io/npm/v/svelte-easy-crop.svg?style=flat-square
[package]: https://www.npmjs.com/package/svelte-easy-crop
[downloads-badge]: https://img.shields.io/npm/dm/svelte-easy-crop.svg?style=flat-square
[npmstats]: http://npm-stat.com/charts.html?package=svelte-easy-crop&from=2018-06-18
[npmstats-badge]: https://img.shields.io/npm/dm/svelte-easy-crop.svg?style=flat-square
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/svelte-easy-crop@1.0.0/index.js?compression=gzip&style=flat-square
[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
[license]: https://github.com/ValentinH/svelte-easy-crop/blob/master/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com