Facebook like, avatar / profile picture component. Resize and crop your uploaded image using a clear user interface.
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;
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. |
The size of the resulting image will have the width and the height of the editor - minus the borders.
var React = require('react'),
AvatarEditor = require('react-avatar-editor');
var MyEditor = React.createClass({
onClickSave: function() {
var dataURL = this.refs.editor.getImage();
// now save it to the state and set it as <img src="…" /> or send it somewhere else
},
render: function() {
return (
<AvatarEditor
image="http://example.com/initialimage.jpg"
width={250}
height={250}
border={50}
scale={1.2} />
);
}
});
module.exports = MyEditor;
For development you can use following build tools:
npm run build
: Builds a minified dist file:dist/index.js
npm run build-debug
: Builds an unminified 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 filedist/index.js