react-avatar-editor v13.0.2

react-avatar-editor

Facebook like, avatar / profile picture component. Resize, crop and rotate your uploaded image using a clear user interface.

Install

Just use yarn or npm to add it to your project:

yarn add react-avatar-editor

respective

npm install --save react-avatar-editor

Demo

Demo

Usage

import React from 'react'
import AvatarEditor from 'react-avatar-editor'

class MyEditor extends React.Component {
  render() {
    return (
      <AvatarEditor
        image="http://example.com/initialimage.jpg"
        width={250}
        height={250}
        border={50}
        color={[255, 255, 255, 0.6]} // RGBA
        scale={1.2}
        rotate={0}
      />
    )
  }
}

export default MyEditor

Props

Accessing the resulting image

The resulting image will have the same resolution as the original image, regardless of the editor's size. If you want the image sized in the dimensions of the canvas you can use getImageScaledToCanvas.

import React from 'react'
import AvatarEditor from 'react-avatar-editor'

class MyEditor extends React.Component {
  onClickSave = () => {
    if (this.editor) {
      // This returns a HTMLCanvasElement, it can be made into a data URL or a blob,
      // drawn on another canvas, or added to the DOM.
      const canvas = this.editor.getImage()

      // If you want the image resized to the canvas size (also a HTMLCanvasElement)
      const canvasScaled = this.editor.getImageScaledToCanvas()
    }
  }

  setEditorRef = (editor) => (this.editor = editor)

  render() {
    return (
      <AvatarEditor
        ref={this.setEditorRef}
        image="http://example.com/initialimage.jpg"
        width={250}
        height={250}
        border={50}
        scale={1.2}
      />
    )
  }
}

export default MyEditor

Adding drag and drop

We recommend using react-dropzone. It allows you to add drag and drop support to anything really easy. Here is an example how to use it with react-avatar-editor:

import React from 'react'
import AvatarEditor from 'react-avatar-editor'
import Dropzone from 'react-dropzone'

class MyEditor extends React.Component {
  state = {
    image: 'http://example.com/initialimage.jpg',
  }

  handleDrop = (dropped) => {
    this.setState({ image: dropped[0] })
  }

  render() {
    return (
      <Dropzone
        onDrop={this.handleDrop}
        noClick
        noKeyboard
        style={{ width: '250px', height: '250px' }}
      >
        {({ getRootProps, getInputProps }) => (
          <div {...getRootProps()}>
            <AvatarEditor width={250} height={250} image={this.state.image} />
            <input {...getInputProps()} />
          </div>
        )}
      </Dropzone>
    )
  }
}

Accessing the cropping rectangle

Sometimes you will need to get the cropping rectangle (the coordinates of the area of the image to keep), for example in case you intend to perform the actual cropping server-side.

getCroppingRect() returns an object with four properties: x, y, width and height; all relative to the image size (that is, comprised between 0 and 1). It is a method of AvatarEditor elements, like getImage().

Note that: getImage() returns a canvas element and if you want to use it in src attribute of img, convert it into a blob url.

const canvas = this.editor.getImage().toDataURL();
let imageURL;
fetch(canvas)
  .then(res => res.blob())
  .then(blob => (imageURL = window.URL.createObjectURL(blob)));

// Usage
<img src={imageURL} ... />

Contributing

For development you can use following build tools:

• npm run build: Builds the minified dist file: dist/index.js
• npm run watch: Watches for file changes and builds unminified into: dist/index.js
• npm run demo:build: Builds the demo based on the dist file dist/index.js
• npm run demo:watch: Run webpack-dev-server. Check demo website localhost:8080

Kudos

Kudos and thanks to danlee for the imporant work & many contributions to this project! Also thanks to oyeanuj, mtlewis and hu9o and all other awesome people contributing to this.