Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ValentinH/svelte-easy-crop
A Svelte component to crop images with easy interactions
https://github.com/ValentinH/svelte-easy-crop
crop crop-image cropping image-manipulation svelte
Last synced: about 1 month ago
JSON representation
A Svelte component to crop images with easy interactions
- Host: GitHub
- URL: https://github.com/ValentinH/svelte-easy-crop
- Owner: ValentinH
- License: mit
- Created: 2019-04-27T21:03:22.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-25T07:21:31.000Z (2 months ago)
- Last Synced: 2024-11-12T03:02:12.069Z (about 1 month ago)
- Topics: crop, crop-image, cropping, image-manipulation, svelte
- Language: TypeScript
- Homepage: https://codesandbox.io/s/svelte-easy-crop-basic-demo-q1005?file=/App.svelte
- Size: 718 KB
- Stars: 199
- Watchers: 5
- Forks: 31
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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).
[![version][version-badge]][package] [![Monthly downloads][npmstats-badge]][npmstats] ![gzip size][gzip-badge] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]
## Demo
- [Basic example](https://codesandbox.io/s/svelte-easy-crop-basic-demo-q1005?file=/App.svelte)
## 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
```shell
yarn add svelte-easy-crop
```
or
```shell
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.
```jsx
import Cropper from 'svelte-easy-crop'
let image = '/images/dog.jpeg'
let crop = { x: 0, y: 0 }
let zoom = 1
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:
1. `percent`: coordinates and dimensions of the cropped area in percentage of the image dimension
1. `pixels`: 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
}
```
## Development
```shell
yarn
yarn dev
```
Now, open `http://localhost:5000` and start hacking!
## License
[MIT](https://github.com/ValentinH/svelte-easy-crop/blob/master/LICENSE)
[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/[email protected]/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