Skip to content

Commit

Permalink
Add a new cropSize option
Browse files Browse the repository at this point in the history 
This enables the developer to set the crop area size manually (instead of relying on aspect and the automatic size).
  • Loading branch information
@ValentinH
ValentinH committed Apr 1, 2019
1 parent 8c25c07 commit 21c30fb
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 28 deletions.
54 changes: 28 additions & 26 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
# react-easy-crop
# react-easy-crop

A React component to crop images with easy interactions


[![version][version-badge]][package] [![Monthly downloads][npmstats-badge]][npmstats] ![gzip size][gzip-badge] [![Build Status][build-badge]][build-page] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]



![react-easy-crop Demo](https://user-images.githubusercontent.com/2678610/41561426-365e7a44-734a-11e8-8e0e-1c04251f53e4.gif)

## Demo

Check out the examples:

- [Basic example with hooks](https://codesandbox.io/s/v69ly910ql)
- [Basic example with class](https://codesandbox.io/s/q80jom5ql6)
- [Example with output of the cropped image](https://codesandbox.io/s/q8q1mnr01w)
Expand All @@ -20,10 +18,10 @@ Check out the examples:

## 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
- 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

Expand Down Expand Up @@ -83,33 +81,37 @@ class App extends React.Component {

## 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'. |
| `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. |
| `onCropChange` | Function | ✓ | Called everytime the crop is changed. Use it to update your `crop` state.|
| `onZoomChange` | Function | | Called everytime the zoom is changed. Use it to update your `zoom` state. |
| [`onCropComplete`](#onCropCompleteProp) | Function | | Called when the user stops moving the image or stops zooming. It will be passed the corresponding cropped area on the image in percentages and pixels |
| `onImgError` | Function | | Called when error occurs while loading an external image |
| `style` | `{ containerStyle: object, imageStyle: object, cropAreaStyle: object }` | | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults. |
| `classes` | `{ containerClassName: string, imageClassName: string, cropAreaClassName: string }` | | Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. |
| `crossOrigin` | string | | Allows setting the crossOrigin attribute on the image. |
| 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. _Warning_: this cannot be changed once the component is displayed. If you need to change it (based on some user inputs for instance), you can force the component to be reset by using a `key`. |
| `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. |
| `onCropChange` | Function | ✓ | Called everytime the crop is changed. Use it to update your `crop` state. |
| `onZoomChange` | Function | | Called everytime the zoom is changed. Use it to update your `zoom` state. |
| [`onCropComplete`](#onCropCompleteProp) | Function | | Called when the user stops moving the image or stops zooming. It will be passed the corresponding cropped area on the image in percentages and pixels |
| `onImgError` | Function | | Called when error occurs while loading an external image |
| `style` | `{ containerStyle: object, imageStyle: object, cropAreaStyle: object }` | | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults. |
| `classes` | `{ containerClassName: string, imageClassName: string, cropAreaClassName: string }` | | Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. |

<a name="onCropCompleteProp"></a>

#### onCropComplete(croppedArea, cropperAreaPixels)

This callback is the one you should use to save the cropped area of the image. It's passed 2 arguments:

1. `croppedArea`: coordinates and dimensions of the cropped area in percentage of the image dimension
1. `cropperAreaPixels`: 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
Expand Down
14 changes: 12 additions & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,14 @@ class Cropper extends React.Component {
this.emitCropData()
}

getAspect() {
const { cropSize, aspect } = this.props
if (cropSize) {
return cropSize.width / cropSize.height
}
return aspect
}

computeSizes = () => {
if (this.image) {
this.imageSize = {
Expand All @@ -76,7 +84,9 @@ class Cropper extends React.Component {
naturalWidth: this.image.naturalWidth,
naturalHeight: this.image.naturalHeight,
}
const cropSize = getCropSize(this.image.width, this.image.height, this.props.aspect)
const cropSize = this.props.cropSize
? this.props.cropSize
: getCropSize(this.image.width, this.image.height, this.props.aspect)
this.setState({ cropSize }, this.recomputeCropPosition)
}
if (this.container) {
Expand Down Expand Up @@ -233,7 +243,7 @@ class Cropper extends React.Component {
restrictedPosition,
this.imageSize,
this.state.cropSize,
this.props.aspect,
this.getAspect(),
this.props.zoom
)
this.props.onCropComplete &&
Expand Down

0 comments on commit 21c30fb

Please sign in to comment.