Skip to content
A React component to crop images/videos with easy interactions
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 7905788 Feb 21, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
.codesandbox 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
.github Update issue templates Dec 6, 2019
.vscode 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
cypress Fix rotation e2e test Aug 28, 2019
docs Use smaller canvas for crop demo Feb 8, 2020
examples/src 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
scripts 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
src Add zoomWithScroll prop for prevent scrolling & update README (#100) Feb 20, 2020
.all-contributorsrc docs: add all-contributors as a contributor (#80) Dec 5, 2019
.babelrc Remove babel-plugin-emotion which was generating wrong deps Mar 15, 2019
.eslintignore 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
.eslintrc.json 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
.gitignore Add support for rotation prop Jul 12, 2019
.npmrc Add .npmrc to avoid publishing top wrong registry May 18, 2019
.prettierrc Create .github folder Jun 19, 2018
CHANGELOG.md Create CHANGELOG.md Jun 23, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jun 23, 2018
LICENSE 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
README.md Add zoomWithScroll prop for prevent scrolling & update README (#100) Feb 20, 2020
bili.config.ts 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
cypress.json Implement basic cypress tests (#2) Jun 24, 2018
package.json v2.1.0 Feb 20, 2020
tsconfig.json 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
webpack.config.js 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020
yarn.lock 2.0.0 release A.K.A Typescript rewrite (#88) Jan 5, 2020

README.md

react-easy-crop

A React component to crop images/videos with easy interactions

version Monthly downloads gzip size All Contributors Build Status MIT License PRs Welcome

react-easy-crop Demo

Demo

Check out the examples:

Features

  • Supports drag, zoom and rotate interactions
  • Provides crop dimensions as pixels and percentages
  • Supports any images format (JPEG, PNG, even GIF) as url or base 64 string
  • Supports any videos format supported in HTML5
  • Mobile friendly

Installation

yarn add react-easy-crop

or

npm install react-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.

import Cropper from 'react-easy-crop'

class App extends React.Component {
  state = {
    image: 'your-image-url or as base64',
    crop: { x: 0, y: 0 },
    zoom: 1,
    aspect: 4 / 3,
  }

  onCropChange = crop => {
    this.setState({ crop })
  }

  onCropComplete = (croppedArea, croppedAreaPixels) => {
    console.log(croppedArea, croppedAreaPixels)
  }

  onZoomChange = zoom => {
    this.setState({ zoom })
  }

  render() {
    return (
      <Cropper
        image={this.state.image}
        crop={this.state.crop}
        zoom={this.state.zoom}
        aspect={this.state.aspect}
        onCropChange={this.onCropChange}
        onCropComplete={this.onCropComplete}
        onZoomChange={this.onZoomChange}
      />
    )
  }
}

Props

Prop Type Required Description
image string The image to be cropped. image or video is required.
video string The video to be cropped. image or video is required.
crop { x: number, y: number } Position of the media. { x: 0, y: 0 } will center the media under the cropper.
zoom number Zoom of the media between minZoom and maxZoom. Defaults to 1.
rotation number (in degrees) Rotation of the media. Defaults to 0.
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 media. Defaults to 1.
maxZoom number Maximum zoom of the media. Defaults to 3.
zoomWithScroll boolean Enable zoom by scrolling. Defaults to true
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 media 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.
onCropChange crop => void Called everytime the crop is changed. Use it to update your crop state.
onZoomChange zoom => void Called everytime the zoom is changed. Use it to update your zoom state.
onRotationChange rotation => void Called everytime the rotation is changed (with mobile gestures). Use it to update your rotation state.
onCropComplete Function Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in percentages and pixels
style { containerStyle: object, mediaStyle: 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, mediaClassName: string, cropAreaClassName: string } Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults.
mediaProps object The properties you want to apply to the media tag ( or depending on your media)
restrictPosition boolean Whether the position of the media should be restricted to the boundaries of the cropper. Useful setting in case of zoom < 1 or if the cropper should preserve all media content while forcing a specific aspect ratio for media throughout the application. Example: https://codesandbox.io/s/1rmqky233q.
initialCroppedAreaPixels { width: number, height: number, x: number, y: number} Use this to set the initial crop position/zoom of the cropper (for example, when editing a previously cropped media). The value should be the same as the croppedAreaPixels passed to onCropComplete Example: https://codesandbox.io/s/pmj19vp2yx.
onInteractionStart Function Called everytime a user starts a wheel, touch or mousedown event.
onInteractionEnd Function Called everytime a user ends a wheel, touch or mousedown event.
onMediaLoaded Function Called when media gets loaded. Gets passed an mediaSize object like { width, height, naturalWidth, naturalHeight }

onCropComplete(croppedArea, croppedAreaPixels)

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

  1. croppedArea: coordinates and dimensions of the cropped area in percentage of the media dimension
  2. croppedAreaPixels: 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
}

onMediaLoaded(mediaSize)

Called when media gets successfully loaded. This is useful if you want to have a custom zoom/crop strategy based on media size.

Example:

const CONTAINER_HEIGHT = 300

const CroppedImage = ({ image }) => {
  const [crop, onCropChange] = React.useState({ x: 0, y: 0 })
  const [zoom, onZoomChange] = React.useState(1)
  return (
    <Cropper
      image={image}
      crop={crop}
      zoom={zoom}
      onCropChange={onCropChange}
      onZoomChange={onZoomChange}
      onMediaLoaded={mediaSize => {
        // Adapt zoom based on media size to fit max height
        setZoom(CONTAINER_HEIGHT / mediaSize.naturalHeight)
      }}
    />
  )
}

Development

yarn
yarn start

Now, open http://localhost:3001/index.html and start hacking!

License

MIT

Contributors

Thanks goes to these wonderful people (emoji key):

Valentin Hervieu
Valentin Hervieu

💬 🐛 💻 📖 💡 🚇 👀 ⚠️ 🔧
Juntae Kim
Juntae Kim

💻
tafelito
tafelito

💻
Nicklas
Nicklas

💻
Kyle Poole
Kyle Poole

💻
Nathaniel Bibler
Nathaniel Bibler

💻
TheRealSlapshot
TheRealSlapshot

💻
Claudiu Andrei
Claudiu Andrei

💻
MattyBalaam
MattyBalaam

💻
Christian Kehr
Christian Kehr

📖
Christopher Albanese
Christopher Albanese

💻
Benjamin Piouffle
Benjamin Piouffle

💻
mbalaam
mbalaam

📖
Edouard Short
Edouard Short

💻 🤔
All Contributors
All Contributors

🔧

This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.