react-avatar-editor 0,0,0 npm

Avatar & profile picture component editor. Resize and crop your uploaded image using a clear user interface.

2 years after MIT

react-avatar-editor

npm version Downloads

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

Usage


var React = require('react'),
  AvatarEditor = require('react-avatar-editor');

var MyEditor = React.createClass({

  render: function() {
    return (
        <AvatarEditor
          image="http://example.com/initialimage.jpg"
          width={250}
          height={250}
          border={50}
          color={[255, 255, 255, 0.6]} // RGBA
          scale={1.2} />
    );
  }

});

module.exports = MyEditor;

Props

Prop Type Description
width Number The total width of the editor
height Number The total width of the editor
border Number The cropping border. Image will be visible through the border, but cut off in the resulting image.
color Number[] The color of the cropping border, in the form: [red (0-255), green (0-255), blue (0-255), alpha (0.0-1.0)]
style Object Styles for the canvas element
scale Number The scale of the image. You can use this to add your own resizing slider.
onDropFile(event) function Invoked when user drops a file (or more) onto the canvas. Does not perform any further check.
onLoadSuccess(imgInfo) function Invoked when an image (whether passed by props or dropped) load succeeds.
onLoadFailure(event) function Invoked when an image (whether passed by props or dropped) load fails.
onMouseUp() function Invoked when the user releases their mouse button after interacting with the editor.
onMouseMove() function Invoked when the user hold and moving the image.

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.


var React = require('react'),
  AvatarEditor = require('react-avatar-editor');

var MyEditor = React.createClass({
  onClickSave: function() {
    var canvas = this.refs.editor.getImage(); // This is a HTMLCanvasElement.
    // It can be made into a data URL or a blob, drawn on another canvas, or added to the DOM.

    // If you want the image resized to the canvas size (also a HTMLCanvasElement)
    var canvasScaled = this.refs.editor.getImageScaledToCanvas();
  },
  render: function() {
    return (
        <AvatarEditor
          ref="editor"
          image="http://example.com/initialimage.jpg"
          width={250}
          height={250}
          border={50}
          scale={1.2} />
    );
  }

});

module.exports = MyEditor;

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().

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: Builds the demo based on the dist file dist/index.js

Please always run npm run build in your pull request.

Related Repositories

awesome-react-components

awesome-react-components

Catalog of React Components & Libraries ...

electron-react-boilerplate

electron-react-boilerplate

Live editing development on desktop app ...

esnextbin

esnextbin

:boom: Create browser programs in ES2015 code and import modules from NPM in bro ...

react-boilerplate

react-boilerplate

:fire: A highly scalable, offline-first foundation with the best developer exper ...

frontend-pre-commit-rules

frontend-pre-commit-rules

A set of rules to add consistency to your code. ...


Top Contributors

mosch dan-lee jakerichan hu9o nmn benwiley4000 chengyin codedmart jbrumwell MateusZitelli kpbp psalaets shakaman dehbmarques bluej100 divyenduz brigand jeffkole luisrudge sahanDissanayake hanagejet tanguyantoine metacortex

Dependencies

package version
prop-types ^15.5.8
dev babel-cli ^6.24.1
babel-eslint 7.2.2
babel-loader ^6.4.1
babel-plugin-transform-class-properties ^6.24.1
babel-plugin-transform-function-bind ^6.8.0
babel-plugin-transform-object-rest-spread ^6.23.0
babel-preset-es2015 ^6.24.1
babel-preset-react ^6.24.1
prop-types ^15.5.8
babelrc-rollup ^3.0.0
jest ^20.0.4
lodash ^4.17.4
react ^15.5.4
react-dom ^15.5.4
rimraf ^2.6.1
rollup ^0.45.2
rollup-plugin-babel ^2.7.1
rollup-plugin-uglify ^2.0.1
rollup-watch ^4.3.1
snazzy ^7.0.0
standard ^10.0.2
webpack ^2.3.3
webpack-dev-server ^2.4.2
peer react >=0.14.0 <16.0.0
react-dom >=0.14.0 <16.0.0

Releases

-   v0.3.1 zip tar
-   4.0.2 zip tar
-   3 zip tar
-   1.4.7 zip tar
-   1.4.6 zip tar
-   1.2.6 zip tar
-   1.2.2 zip tar
-   1.1.1 zip tar