ImageEditor by react-cropper

ImageEditor.jsx

import * as React from 'react';
import Dialog, { DialogActions, DialogTitle } from 'material-ui/Dialog';
import { withStyles } from 'material-ui/styles';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

const styles = {
	paper: {
		backgroundColor: '#2781ca',
		borderRadius: '5px',
	},
	button: {
		margin: '0',
		height: '40px',
		border: '2px solid white',
		'&:hover': {
			color: '#2781ca',
			backgroundColor: 'white',
		},
	},
	title: {
		color: 'white',
		fontWeight: '100',
		marginLeft: '2%',
	},
};

class ImageEditor extends React.Component {
	setRef = ref => (this.cropperRef = ref);

	handleCropEnd = () => {
		const resultImageData = this.cropperRef.getCroppedCanvas().toDataURL();
		this.props.onCropSuccess(resultImageData);
	};

	handleCropDecline = () => {
		this.props.onCropAborted();
	};

	render() {
		const { isOpen, imageData, classes, ...other } = this.props;
		return (
			<Dialog
				open={isOpen}
				onRequestClose={this.handleCropDecline}
				maxWidth="md"
				classes={{ paper: classes.paper }}
				{...other}
			>
				<h3 className={classes.title}>Редактирование фотографии</h3>
				<Cropper
					className={this.props.className}
					ref={this.setRef}
					src={imageData}
					aspectRatio={1}
					zoomable
					guides
					style={{
						width: '70vh',
						height: '70vh',
						overflow: 'hidden',
					}}
				/>
				<DialogActions classes={{ button: classes.button }}>
					<button className="avatar-section__upload-btn btn" onClick={this.handleCropDecline}>
						Отменить
					</button>
					<button className="avatar-section__upload-btn btn" onClick={this.handleCropEnd}>
						Сохранить
					</button>
				</DialogActions>
			</Dialog>
		);
	}
}

export default withStyles(styles)(ImageEditor);