├── .babelrc
├── .gitignore
├── README.md
├── cropper.css
├── dist
    ├── react-crop.js
    ├── react-crop.js.map
    ├── react-crop.min.js
    └── react-crop.min.js.map
├── docs
    ├── bundle.js
    ├── index.html
    └── index.js
├── draggable-resizable-box.js
├── index.js
├── lib
    ├── cropper.css
    ├── draggable-resizable-box.js
    └── index.src.js
├── package.json
├── webpack.config.js
└── webpack.dist.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "react", "stage-1"],
3 |   "plugins": ["transform-object-assign"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | npm_debug.log
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | #react-crop#
  2 | An accessible image cropper where the image is stationary and a resizable, draggable box represents the cropped image
  3 | 
  4 | For example usage check out the docs folder. Demo: http://instructure-react.github.io/react-crop/
  5 | 
  6 | ###Basic usage###
  7 | 
  8 | ``` javascript
  9 | import React, { Component } from 'react';
 10 | 
 11 | import Cropper from 'react-crop';
 12 | import 'react-crop/css';
 13 | 
 14 | // You'll need to use async functions
 15 | import "babel-core/register";
 16 | import "babel-polyfill";
 17 | 
 18 | export default class MyComponent extends Component {
 19 |     constructor() {
 20 |         super();
 21 | 
 22 |         this.state = {
 23 |             image: null,
 24 |             previewImage: null
 25 |         };
 26 |     }
 27 | 
 28 |     onChange(evt) {
 29 |         this.setState({
 30 |             image: evt.target.files[0]
 31 |         })
 32 |     }
 33 | 
 34 |     async crop() {
 35 |         let image = await this.refs.crop.cropImage()
 36 |         this.setState({
 37 |             previewUrl: window.URL.createObjectURL(image)
 38 |         })
 39 |     }
 40 | 
 41 |     clear() {
 42 |         this.refs.file.value = null
 43 |         this.setState({
 44 |             previewUrl: null,
 45 |             image: null
 46 |         })
 47 |     }
 48 | 
 49 |     imageLoaded(img) {
 50 |         if (img.naturalWidth && img.naturalWidth < 262 &&
 51 |             img.naturalHeight && img.naturalHeight < 147) {
 52 |             this.crop()
 53 |         }
 54 |     }
 55 | 
 56 |     render() {
 57 |         return (
 58 |             <div>
 59 |                 <input ref='file' type='file' onChange={this.onChange} />
 60 | 
 61 |                 {
 62 | 
 63 |                     this.state.image &&
 64 | 
 65 |                     <div>
 66 |                         <Cropper
 67 |                             ref='crop'
 68 |                             image={this.state.image}
 69 |                             width={100}
 70 |                             height={80}
 71 |                             onImageLoaded={this.imageLoaded}
 72 |                         />
 73 | 
 74 |                         <button onClick={this.crop}>Crop</button>
 75 |                         <button onClick={this.clear}>Clear</button>
 76 |                     </div>
 77 | 
 78 |                 }
 79 | 
 80 |                 {
 81 |                     this.state.previewUrl &&
 82 | 
 83 |                     <img src={this.state.previewUrl} />
 84 |                 }
 85 | 
 86 |             </div>
 87 |         );
 88 |     }
 89 | }
 90 | ```
 91 | 
 92 | ###Props###
 93 | 
 94 | ####`width`####
 95 | This is the desired width that you would like the image to be cropped to. The width of the cropper will be scaled to fit this size. This prop also helps determine the minimum width that the cropper can be.
 96 | 
 97 | ####`height`####
 98 | This is the desired height that you would like the image to be cropped to. The height of the cropper will be scaled to fit this size. This prop also helps determine the minimum height that the cropper can be. The width and height aspect ratio will be preserved while resizing the cropper.
 99 | 
100 | ####`image`####
101 | A `blob` of the original image that you wish to crop.
102 | 
103 | ####`widthLabel`####
104 | The label to use next to the width input used for keyboard users. This is especially useful if you need to localize the text. The default is "Width".
105 | 
106 | ####`heightLabel`####
107 | The label to use next to the height input used for keyboard users. This is especially useful if you need to localize the text. The default is "Height".
108 | 
109 | ####`offsetXLabel`####
110 | The label to use next to the offset X input used for keyboard users. This is especially useful if you need to localize the text. The default is "Offset X".
111 | 
112 | ####`offsetYLabel`####
113 | The label to use next to the offset Y input used for keyboard users. This is especially useful if you need to localize the text. The default is "Offset Y".
114 | 
115 | ###Running the Example###
116 |  - Clone the repo
117 |  - `npm i`
118 |  - `npm run docs`
119 |  - Visit `localhost:8080`
120 | 


--------------------------------------------------------------------------------
/cropper.css:
--------------------------------------------------------------------------------
  1 | .Cropper {
  2 |   position: relative;
  3 |   display: inline-block;
  4 |   max-width:100%;
  5 |   max-height:100%;
  6 | }
  7 | 
  8 | .box {
  9 |   position: absolute;
 10 |   top: 0;
 11 |   left: 0;
 12 |   bottom: 0;
 13 |   right: 0;
 14 | }
 15 | 
 16 | .Cropper-box {
 17 |   position: absolute;
 18 |   top: 0;
 19 |   left: 0;
 20 |   bottom: 0;
 21 |   right: 0;
 22 |   cursor: move;
 23 |   border: #fff solid 1px;
 24 | }
 25 | 
 26 | .Cropper-canvas {
 27 |   visibility: hidden;
 28 |   position: absolute;
 29 | }
 30 | 
 31 | .Cropper-image {
 32 |   vertical-align: middle;
 33 |   max-width: 100%;
 34 |   position: relative;
 35 |   transform: translate(-50%, -50%);
 36 |   left: 50%;
 37 | }
 38 | 
 39 | .resize-handle {
 40 |   position: absolute;
 41 |   background-color: #ECEEEF;
 42 |   border: #8295AB solid 1px;
 43 |   width: 13px;
 44 |   height: 13px;
 45 |   z-index: 1;
 46 | }
 47 | 
 48 | .resize-handle-se {
 49 |   bottom: 0;
 50 |   right: 0;
 51 |   cursor: nwse-resize;
 52 |   transform: translate(50%, 50%);
 53 | }
 54 | .resize-handle-ne {
 55 |   right: 0;
 56 |   top: 0;
 57 |   cursor: nesw-resize;
 58 |   transform: translate(50%, -50%);
 59 | }
 60 | .resize-handle-sw {
 61 |   bottom: 0;
 62 |   left: 0;
 63 |   cursor: nesw-resize;
 64 |   transform: translate(-50%, 50%);
 65 | }
 66 | .resize-handle-nw {
 67 |   top: 0;
 68 |   bottom: 0;
 69 |   cursor: nwse-resize;
 70 |   transform: translate(-50%, -50%);
 71 | }
 72 | 
 73 | .DraggableResizable {
 74 |   position: relative;
 75 |   width: 100%;
 76 |   height: 100%;
 77 | }
 78 | 
 79 | .DraggableResizable-controls {
 80 |   border: 0;
 81 |   clip: rect(0 0 0 0);
 82 |   height: 1px;
 83 |   margin: -1px;
 84 |   overflow: hidden;
 85 |   padding: 0;
 86 |   position: absolute;
 87 |   width: 1px;
 88 | }
 89 | 
 90 | .DraggableResizable-top,
 91 | .DraggableResizable-left,
 92 | .DraggableResizable-bottom,
 93 | .DraggableResizable-right {
 94 |   position: absolute;
 95 |   background-color: rgba(0,0,0,.7);
 96 | }
 97 | 
 98 | .DraggableResizable-top {
 99 |   top: 0;
100 |   left: 0;
101 |   right: 0;
102 | }
103 | .DraggableResizable-bottom {
104 |   bottom: 0;
105 |   left: 0;
106 |   right: 0;
107 | }
108 | .DraggableResizable-left {
109 |   left: 0;
110 | }
111 | .DraggableResizable-right {
112 |   right: 0;
113 | }
114 | 


--------------------------------------------------------------------------------
/dist/react-crop.js:
--------------------------------------------------------------------------------
   1 | (function webpackUniversalModuleDefinition(root, factory) {
   2 | 	if(typeof exports === 'object' && typeof module === 'object')
   3 | 		module.exports = factory(require("react"));
   4 | 	else if(typeof define === 'function' && define.amd)
   5 | 		define(["react"], factory);
   6 | 	else if(typeof exports === 'object')
   7 | 		exports["ReactCrop"] = factory(require("react"));
   8 | 	else
   9 | 		root["ReactCrop"] = factory(root["react"]);
  10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
  11 | return /******/ (function(modules) { // webpackBootstrap
  12 | /******/ 	// The module cache
  13 | /******/ 	var installedModules = {};
  14 | /******/
  15 | /******/ 	// The require function
  16 | /******/ 	function __webpack_require__(moduleId) {
  17 | /******/
  18 | /******/ 		// Check if module is in cache
  19 | /******/ 		if(installedModules[moduleId])
  20 | /******/ 			return installedModules[moduleId].exports;
  21 | /******/
  22 | /******/ 		// Create a new module (and put it into the cache)
  23 | /******/ 		var module = installedModules[moduleId] = {
  24 | /******/ 			exports: {},
  25 | /******/ 			id: moduleId,
  26 | /******/ 			loaded: false
  27 | /******/ 		};
  28 | /******/
  29 | /******/ 		// Execute the module function
  30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31 | /******/
  32 | /******/ 		// Flag the module as loaded
  33 | /******/ 		module.loaded = true;
  34 | /******/
  35 | /******/ 		// Return the exports of the module
  36 | /******/ 		return module.exports;
  37 | /******/ 	}
  38 | /******/
  39 | /******/
  40 | /******/ 	// expose the modules object (__webpack_modules__)
  41 | /******/ 	__webpack_require__.m = modules;
  42 | /******/
  43 | /******/ 	// expose the module cache
  44 | /******/ 	__webpack_require__.c = installedModules;
  45 | /******/
  46 | /******/ 	// __webpack_public_path__
  47 | /******/ 	__webpack_require__.p = "/";
  48 | /******/
  49 | /******/ 	// Load entry module and return exports
  50 | /******/ 	return __webpack_require__(0);
  51 | /******/ })
  52 | /************************************************************************/
  53 | /******/ ([
  54 | /* 0 */
  55 | /***/ function(module, exports, __webpack_require__) {
  56 | 
  57 | 	'use strict';
  58 | 	
  59 | 	Object.defineProperty(exports, "__esModule", {
  60 | 	  value: true
  61 | 	});
  62 | 	
  63 | 	var _react = __webpack_require__(1);
  64 | 	
  65 | 	var _react2 = _interopRequireDefault(_react);
  66 | 	
  67 | 	var _draggableResizableBox = __webpack_require__(2);
  68 | 	
  69 | 	var _draggableResizableBox2 = _interopRequireDefault(_draggableResizableBox);
  70 | 	
  71 | 	var _dataUriToBlob = __webpack_require__(3);
  72 | 	
  73 | 	var _dataUriToBlob2 = _interopRequireDefault(_dataUriToBlob);
  74 | 	
  75 | 	__webpack_require__(4);
  76 | 	
  77 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  78 | 	
  79 | 	exports.default = _react2.default.createClass({
  80 | 	  displayName: 'Cropper',
  81 | 	
  82 | 	  propTypes: {
  83 | 	    width: _react2.default.PropTypes.number.isRequired,
  84 | 	    height: _react2.default.PropTypes.number.isRequired,
  85 | 	    center: _react2.default.PropTypes.bool,
  86 | 	    image: _react2.default.PropTypes.any,
  87 | 	    widthLabel: _react2.default.PropTypes.string,
  88 | 	    heightLabel: _react2.default.PropTypes.string,
  89 | 	    offsetXLabel: _react2.default.PropTypes.string,
  90 | 	    offsetYLabel: _react2.default.PropTypes.string,
  91 | 	    onImageLoaded: _react2.default.PropTypes.func,
  92 | 	    minConstraints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)
  93 | 	  },
  94 | 	
  95 | 	  getDefaultProps: function getDefaultProps() {
  96 | 	    return {
  97 | 	      center: false,
  98 | 	      width: 'Width',
  99 | 	      height: 'Height',
 100 | 	      offsetXLabel: 'Offset X',
 101 | 	      offsetYLabel: 'Offset Y'
 102 | 	    };
 103 | 	  },
 104 | 	  getInitialState: function getInitialState() {
 105 | 	    return {
 106 | 	      imageLoaded: false,
 107 | 	      width: this.props.width,
 108 | 	      height: this.props.height,
 109 | 	      url: window.URL.createObjectURL(this.props.image)
 110 | 	    };
 111 | 	  },
 112 | 	  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
 113 | 	    if (this.props.image !== nextProps.image) {
 114 | 	      this.setState({
 115 | 	        url: window.URL.createObjectURL(nextProps.image),
 116 | 	        imageLoaded: false
 117 | 	      });
 118 | 	    }
 119 | 	  },
 120 | 	  shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
 121 | 	    var image = this.props.image;
 122 | 	
 123 | 	    return nextProps.image.size !== image.size || nextProps.image.name !== image.name || nextProps.image.type !== image.type || nextState.imageLoaded !== this.state.imageLoaded;
 124 | 	  },
 125 | 	  onLoad: function onLoad(evt) {
 126 | 	    var _this = this;
 127 | 	
 128 | 	    var box = this.refs.box.getBoundingClientRect();
 129 | 	    this.setState({
 130 | 	      imageLoaded: true,
 131 | 	      width: box.width,
 132 | 	      height: box.height
 133 | 	    }, function () {
 134 | 	      var img = _this.refs.image;
 135 | 	      _this.props.onImageLoaded && _this.props.onImageLoaded(img);
 136 | 	    });
 137 | 	  },
 138 | 	  cropImage: function cropImage() {
 139 | 	    var _this2 = this;
 140 | 	
 141 | 	    return new Promise(function (resolve, reject) {
 142 | 	      var img = new Image();
 143 | 	      img.onload = function () {
 144 | 	        var canvas = _this2.refs.canvas;
 145 | 	        var img = _this2.refs.image;
 146 | 	        var ctx = canvas.getContext('2d');
 147 | 	        var xScale = img.naturalWidth / _this2.state.width,
 148 | 	            yScale = img.naturalHeight / _this2.state.height;
 149 | 	
 150 | 	
 151 | 	        var imageOffsetX = xScale < 1 ? 0 : _this2.state.offset.left * xScale;
 152 | 	        var imageOffsetY = yScale < 1 ? 0 : _this2.state.offset.top * yScale;
 153 | 	        var imageWidth = xScale < 1 ? img.naturalWidth : _this2.state.dimensions.width * xScale;
 154 | 	        var imageHeight = yScale < 1 ? img.naturalHeight : _this2.state.dimensions.height * yScale;
 155 | 	
 156 | 	        var canvasOffsetX = xScale < 1 ? Math.floor((_this2.state.dimensions.width - img.naturalWidth) / 2) : 0;
 157 | 	        var canvasOffsetY = yScale < 1 ? Math.floor((_this2.state.dimensions.height - img.naturalHeight) / 2) : 0;
 158 | 	        var canvasWidth = xScale < 1 ? img.naturalWidth : _this2.props.width;
 159 | 	        var canvasHeight = yScale < 1 ? img.naturalHeight : _this2.props.height;
 160 | 	
 161 | 	        ctx.clearRect(0, 0, _this2.props.width, _this2.props.height);
 162 | 	        ctx.drawImage(img, imageOffsetX, imageOffsetY, imageWidth, imageHeight, canvasOffsetX, canvasOffsetY, canvasWidth, canvasHeight);
 163 | 	        resolve((0, _dataUriToBlob2.default)(canvas.toDataURL()));
 164 | 	      };
 165 | 	      img.src = window.URL.createObjectURL(_this2.props.image);
 166 | 	    });
 167 | 	  },
 168 | 	  onChange: function onChange(offset, dimensions) {
 169 | 	    this.setState({ offset: offset, dimensions: dimensions });
 170 | 	  },
 171 | 	  render: function render() {
 172 | 	    return _react2.default.createElement(
 173 | 	      'div',
 174 | 	      {
 175 | 	        ref: 'box',
 176 | 	        className: 'Cropper',
 177 | 	        style: {
 178 | 	          minWidth: this.props.width,
 179 | 	          minHeight: this.props.height
 180 | 	        } },
 181 | 	      _react2.default.createElement('canvas', {
 182 | 	        className: 'Cropper-canvas',
 183 | 	        ref: 'canvas',
 184 | 	        width: this.props.width,
 185 | 	        height: this.props.height }),
 186 | 	      _react2.default.createElement('img', {
 187 | 	        ref: 'image',
 188 | 	        src: this.state.url,
 189 | 	        className: 'Cropper-image',
 190 | 	        onLoad: this.onLoad,
 191 | 	        style: { top: this.state.height / 2 } }),
 192 | 	      this.state.imageLoaded && _react2.default.createElement(
 193 | 	        'div',
 194 | 	        { className: 'box' },
 195 | 	        _react2.default.createElement(
 196 | 	          _draggableResizableBox2.default,
 197 | 	          {
 198 | 	            aspectRatio: this.props.width / this.props.height,
 199 | 	            width: this.state.width,
 200 | 	            height: this.state.height,
 201 | 	            minConstraints: this.props.minConstraints,
 202 | 	            onChange: this.onChange,
 203 | 	            widthLabel: this.props.widthLabel,
 204 | 	            heightLabel: this.props.heightLabel,
 205 | 	            offsetXLabel: this.props.offsetXLabel,
 206 | 	            offsetYLabel: this.props.offsetYLabel },
 207 | 	          _react2.default.createElement('div', { className: 'Cropper-box' })
 208 | 	        )
 209 | 	      )
 210 | 	    );
 211 | 	  }
 212 | 	});
 213 | 
 214 | /***/ },
 215 | /* 1 */
 216 | /***/ function(module, exports) {
 217 | 
 218 | 	module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
 219 | 
 220 | /***/ },
 221 | /* 2 */
 222 | /***/ function(module, exports, __webpack_require__) {
 223 | 
 224 | 	'use strict';
 225 | 	
 226 | 	Object.defineProperty(exports, "__esModule", {
 227 | 	  value: true
 228 | 	});
 229 | 	
 230 | 	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 231 | 	
 232 | 	var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 233 | 	
 234 | 	var _react = __webpack_require__(1);
 235 | 	
 236 | 	var _react2 = _interopRequireDefault(_react);
 237 | 	
 238 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 239 | 	
 240 | 	exports.default = _react2.default.createClass({
 241 | 	  displayName: 'DraggableResizableBox',
 242 | 	
 243 | 	  propTypes: {
 244 | 	    aspectRatio: _react2.default.PropTypes.number.isRequired,
 245 | 	    width: _react2.default.PropTypes.number.isRequired,
 246 | 	    height: _react2.default.PropTypes.number.isRequired,
 247 | 	    onChange: _react2.default.PropTypes.func,
 248 | 	    offset: _react2.default.PropTypes.array,
 249 | 	    minConstraints: _react2.default.PropTypes.array,
 250 | 	    children: _react2.default.PropTypes.node,
 251 | 	    widthLabel: _react2.default.PropTypes.string,
 252 | 	    heightLabel: _react2.default.PropTypes.string,
 253 | 	    offsetXLabel: _react2.default.PropTypes.string,
 254 | 	    offsetYLabel: _react2.default.PropTypes.string
 255 | 	  },
 256 | 	
 257 | 	  getDefaultProps: function getDefaultProps() {
 258 | 	    return {
 259 | 	      widthLabel: 'Width',
 260 | 	      heightLabel: 'Height',
 261 | 	      offsetXLabel: 'Offset X',
 262 | 	      offsetYLabel: 'Offset Y'
 263 | 	    };
 264 | 	  },
 265 | 	  getInitialState: function getInitialState() {
 266 | 	    var _preserveAspectRatio = this.preserveAspectRatio(this.props.width, this.props.height),
 267 | 	        _preserveAspectRatio2 = _slicedToArray(_preserveAspectRatio, 2),
 268 | 	        width = _preserveAspectRatio2[0],
 269 | 	        height = _preserveAspectRatio2[1];
 270 | 	
 271 | 	    var centerYOffset = (this.props.height - height) / 2;
 272 | 	    var centerXOffset = (this.props.width - width) / 2;
 273 | 	    return {
 274 | 	      top: centerYOffset,
 275 | 	      left: centerXOffset,
 276 | 	      bottom: centerYOffset,
 277 | 	      right: centerXOffset,
 278 | 	      width: width,
 279 | 	      height: height
 280 | 	    };
 281 | 	  },
 282 | 	  componentDidMount: function componentDidMount() {
 283 | 	    document.addEventListener('mousemove', this.eventMove);
 284 | 	    document.addEventListener('mouseup', this.eventEnd);
 285 | 	    document.addEventListener('touchmove', this.eventMove);
 286 | 	    document.addEventListener('touchend', this.eventEnd);
 287 | 	    document.addEventListener('keydown', this.handleKey);
 288 | 	    this.props.onChange({
 289 | 	      top: this.state.top,
 290 | 	      left: this.state.left
 291 | 	    }, {
 292 | 	      width: this.state.width,
 293 | 	      height: this.state.height
 294 | 	    });
 295 | 	  },
 296 | 	  componentWillUnmount: function componentWillUnmount() {
 297 | 	    document.removeEventListener('mousemove', this.eventMove);
 298 | 	    document.removeEventListener('mouseup', this.eventEnd);
 299 | 	    document.removeEventListener('touchmove', this.eventMove);
 300 | 	    document.removeEventListener('touchend', this.eventEnd);
 301 | 	    document.removeEventListener('keydown', this.handleKey);
 302 | 	  },
 303 | 	  calculateDimensions: function calculateDimensions(_ref) {
 304 | 	    var top = _ref.top,
 305 | 	        left = _ref.left,
 306 | 	        bottom = _ref.bottom,
 307 | 	        right = _ref.right;
 308 | 	
 309 | 	    return { width: this.props.width - left - right, height: this.props.height - top - bottom };
 310 | 	  },
 311 | 	
 312 | 	
 313 | 	  // If you do this, be careful of constraints
 314 | 	  preserveAspectRatio: function preserveAspectRatio(width, height) {
 315 | 	    if (this.props.minConstraints) {
 316 | 	      width = Math.max(width, this.props.minConstraints[0]);
 317 | 	      height = Math.max(height, this.props.minConstraints[1]);
 318 | 	    }
 319 | 	    var currentAspectRatio = width / height;
 320 | 	
 321 | 	    if (currentAspectRatio < this.props.aspectRatio) {
 322 | 	      return [width, width / this.props.aspectRatio];
 323 | 	    } else if (currentAspectRatio > this.props.aspectRatio) {
 324 | 	      return [height * this.props.aspectRatio, height];
 325 | 	    } else {
 326 | 	      return [width, height];
 327 | 	    }
 328 | 	  },
 329 | 	  constrainBoundary: function constrainBoundary(side) {
 330 | 	    return side < 0 ? 0 : side;
 331 | 	  },
 332 | 	  getClientCoordinates: function getClientCoordinates(evt) {
 333 | 	    return evt.touches ? {
 334 | 	      clientX: evt.touches[0].clientX,
 335 | 	      clientY: evt.touches[0].clientY
 336 | 	    } : {
 337 | 	      clientX: evt.clientX,
 338 | 	      clientY: evt.clientY
 339 | 	    };
 340 | 	  },
 341 | 	  eventMove: function eventMove(evt) {
 342 | 	    if (this.state.resizing) {
 343 | 	      this.onResize(evt);
 344 | 	    } else if (this.state.moving) {
 345 | 	      this.eventMoveBox(evt);
 346 | 	    }
 347 | 	  },
 348 | 	  eventEnd: function eventEnd(evt) {
 349 | 	    if (this.state.resizing) {
 350 | 	      this.stopResize(evt);
 351 | 	    } else if (this.state.moving) {
 352 | 	      this.stopMove(evt);
 353 | 	    }
 354 | 	  },
 355 | 	
 356 | 	
 357 | 	  // Resize methods
 358 | 	  startResize: function startResize(corner, event) {
 359 | 	    event.stopPropagation();
 360 | 	    event.preventDefault();
 361 | 	    this.setState({
 362 | 	      resizing: true,
 363 | 	      corner: corner
 364 | 	    });
 365 | 	  },
 366 | 	  stopResize: function stopResize() {
 367 | 	    this.setState({ resizing: false });
 368 | 	  },
 369 | 	
 370 | 	
 371 | 	  // resize strategies
 372 | 	  nw: function nw(mousePos, boxPos) {
 373 | 	    var pos = _extends({}, this.state, {
 374 | 	      top: this.constrainBoundary(mousePos.clientY - boxPos.top),
 375 | 	      left: this.constrainBoundary(mousePos.clientX - boxPos.left)
 376 | 	    });
 377 | 	    var dimensions = this.calculateDimensions(pos);
 378 | 	
 379 | 	    var _preserveAspectRatio3 = this.preserveAspectRatio(dimensions.width, dimensions.height),
 380 | 	        _preserveAspectRatio4 = _slicedToArray(_preserveAspectRatio3, 2),
 381 | 	        width = _preserveAspectRatio4[0],
 382 | 	        height = _preserveAspectRatio4[1];
 383 | 	
 384 | 	    pos.top = this.props.height - pos.bottom - height;
 385 | 	    pos.left = this.props.width - pos.right - width;
 386 | 	    return pos;
 387 | 	  },
 388 | 	  ne: function ne(mousePos, boxPos) {
 389 | 	    var pos = _extends({}, this.state, {
 390 | 	      top: this.constrainBoundary(mousePos.clientY - boxPos.top),
 391 | 	      right: this.constrainBoundary(boxPos.right - mousePos.clientX)
 392 | 	    });
 393 | 	    var dimensions = this.calculateDimensions(pos);
 394 | 	
 395 | 	    var _preserveAspectRatio5 = this.preserveAspectRatio(dimensions.width, dimensions.height),
 396 | 	        _preserveAspectRatio6 = _slicedToArray(_preserveAspectRatio5, 2),
 397 | 	        width = _preserveAspectRatio6[0],
 398 | 	        height = _preserveAspectRatio6[1];
 399 | 	
 400 | 	    pos.top = this.props.height - pos.bottom - height;
 401 | 	    pos.right = this.props.width - pos.left - width;
 402 | 	    return pos;
 403 | 	  },
 404 | 	  se: function se(mousePos, boxPos) {
 405 | 	    var pos = _extends({}, this.state, {
 406 | 	      bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),
 407 | 	      right: this.constrainBoundary(boxPos.right - mousePos.clientX)
 408 | 	    });
 409 | 	    var dimensions = this.calculateDimensions(pos);
 410 | 	
 411 | 	    var _preserveAspectRatio7 = this.preserveAspectRatio(dimensions.width, dimensions.height),
 412 | 	        _preserveAspectRatio8 = _slicedToArray(_preserveAspectRatio7, 2),
 413 | 	        width = _preserveAspectRatio8[0],
 414 | 	        height = _preserveAspectRatio8[1];
 415 | 	
 416 | 	    pos.bottom = this.props.height - pos.top - height;
 417 | 	    pos.right = this.props.width - pos.left - width;
 418 | 	    return pos;
 419 | 	  },
 420 | 	  sw: function sw(mousePos, boxPos) {
 421 | 	    var pos = _extends({}, this.state, {
 422 | 	      bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),
 423 | 	      left: this.constrainBoundary(mousePos.clientX - boxPos.left)
 424 | 	    });
 425 | 	    var dimensions = this.calculateDimensions(pos);
 426 | 	
 427 | 	    var _preserveAspectRatio9 = this.preserveAspectRatio(dimensions.width, dimensions.height),
 428 | 	        _preserveAspectRatio10 = _slicedToArray(_preserveAspectRatio9, 2),
 429 | 	        width = _preserveAspectRatio10[0],
 430 | 	        height = _preserveAspectRatio10[1];
 431 | 	
 432 | 	    pos.bottom = this.props.height - pos.top - height;
 433 | 	    pos.left = this.props.width - pos.right - width;
 434 | 	    return pos;
 435 | 	  },
 436 | 	  onResize: function onResize(event) {
 437 | 	    var box = this.refs.box.parentElement.parentElement.getBoundingClientRect();
 438 | 	    var coordinates = this.getClientCoordinates(event);
 439 | 	    var position = this[this.state.corner](coordinates, box);
 440 | 	    this.resize(position, coordinates);
 441 | 	  },
 442 | 	  controlsResize: function controlsResize(event) {
 443 | 	    var box = this.refs.box.parentElement.parentElement.getBoundingClientRect();
 444 | 	    var width = event.target.name === 'width' ? +event.target.value : +event.target.value * this.props.aspectRatio;
 445 | 	    var height = event.target.name === 'height' ? +event.target.value : +event.target.value / this.props.aspectRatio;
 446 | 	    var dimensions = this.preserveAspectRatio(width, height);
 447 | 	    width = dimensions[0];
 448 | 	    height = dimensions[1];
 449 | 	
 450 | 	    if (width > box.width - this.state.left || height > box.height - this.state.top) return;
 451 | 	
 452 | 	    var widthDifference = this.state.width - width;
 453 | 	    var heightDifference = this.state.height - height;
 454 | 	    var pos = _extends({}, this.state, {
 455 | 	      right: this.state.right + widthDifference,
 456 | 	      bottom: this.state.bottom + heightDifference
 457 | 	    });
 458 | 	    var coordinates = {
 459 | 	      clientX: box.right - pos.right,
 460 | 	      clientY: box.bottom - pos.bottom
 461 | 	    };
 462 | 	
 463 | 	    this.resize(pos, coordinates);
 464 | 	  },
 465 | 	  resize: function resize(position, coordinates) {
 466 | 	    var _this = this;
 467 | 	
 468 | 	    var dimensions = this.calculateDimensions(position);
 469 | 	    var widthChanged = dimensions.width !== this.state.width,
 470 | 	        heightChanged = dimensions.height !== this.state.height;
 471 | 	    if (!widthChanged && !heightChanged) return;
 472 | 	
 473 | 	    this.setState(_extends({}, coordinates, position, dimensions), function () {
 474 | 	      _this.props.onChange({
 475 | 	        top: position.top,
 476 | 	        left: position.left
 477 | 	      }, dimensions);
 478 | 	    });
 479 | 	  },
 480 | 	
 481 | 	
 482 | 	  // Move methods
 483 | 	  startMove: function startMove(evt) {
 484 | 	    var _getClientCoordinates = this.getClientCoordinates(evt),
 485 | 	        clientX = _getClientCoordinates.clientX,
 486 | 	        clientY = _getClientCoordinates.clientY;
 487 | 	
 488 | 	    this.setState({
 489 | 	      moving: true,
 490 | 	      clientX: clientX,
 491 | 	      clientY: clientY
 492 | 	    });
 493 | 	  },
 494 | 	  stopMove: function stopMove(evt) {
 495 | 	    this.setState({
 496 | 	      moving: false
 497 | 	    });
 498 | 	  },
 499 | 	  eventMoveBox: function eventMoveBox(evt) {
 500 | 	    evt.preventDefault();
 501 | 	
 502 | 	    var _getClientCoordinates2 = this.getClientCoordinates(evt),
 503 | 	        clientX = _getClientCoordinates2.clientX,
 504 | 	        clientY = _getClientCoordinates2.clientY;
 505 | 	
 506 | 	    var movedX = clientX - this.state.clientX;
 507 | 	    var movedY = clientY - this.state.clientY;
 508 | 	
 509 | 	    this.moveBox(clientX, clientY, movedX, movedY);
 510 | 	  },
 511 | 	  controlsMoveBox: function controlsMoveBox(evt) {
 512 | 	    var movedX = evt.target.name === 'x' ? evt.target.value - this.state.left : 0;
 513 | 	    var movedY = evt.target.name === 'y' ? evt.target.value - this.state.top : 0;
 514 | 	    this.moveBox(0, 0, movedX, movedY);
 515 | 	  },
 516 | 	  moveBox: function moveBox(clientX, clientY, movedX, movedY) {
 517 | 	    var _this2 = this;
 518 | 	
 519 | 	    var position = {
 520 | 	      top: this.constrainBoundary(this.state.top + movedY),
 521 | 	      left: this.constrainBoundary(this.state.left + movedX),
 522 | 	      bottom: this.constrainBoundary(this.state.bottom - movedY),
 523 | 	      right: this.constrainBoundary(this.state.right - movedX)
 524 | 	    };
 525 | 	
 526 | 	    if (!position.top) {
 527 | 	      position.bottom = this.props.height - this.state.height;
 528 | 	    }
 529 | 	    if (!position.bottom) {
 530 | 	      position.top = this.props.height - this.state.height;
 531 | 	    }
 532 | 	    if (!position.left) {
 533 | 	      position.right = this.props.width - this.state.width;
 534 | 	    }
 535 | 	    if (!position.right) {
 536 | 	      position.left = this.props.width - this.state.width;
 537 | 	    }
 538 | 	
 539 | 	    this.setState(_extends({}, {
 540 | 	      clientX: clientX,
 541 | 	      clientY: clientY
 542 | 	    }, position), function () {
 543 | 	      _this2.props.onChange({
 544 | 	        top: position.top,
 545 | 	        left: position.left
 546 | 	      }, _this2.calculateDimensions(position));
 547 | 	    });
 548 | 	  },
 549 | 	  keyboardResize: function keyboardResize(change) {
 550 | 	    if (this.state.right - change < 0) {
 551 | 	      return;
 552 | 	    }
 553 | 	    if (this.state.bottom - change < 0) {
 554 | 	      return;
 555 | 	    }
 556 | 	
 557 | 	    var _preserveAspectRatio11 = this.preserveAspectRatio(this.state.width + change, this.state.height + change),
 558 | 	        _preserveAspectRatio12 = _slicedToArray(_preserveAspectRatio11, 2),
 559 | 	        width = _preserveAspectRatio12[0],
 560 | 	        height = _preserveAspectRatio12[1];
 561 | 	
 562 | 	    var widthChange = width - this.state.width;
 563 | 	    var heightChange = height - this.state.height;
 564 | 	
 565 | 	    this.setState({
 566 | 	      bottom: this.state.bottom - heightChange,
 567 | 	      right: this.state.right - widthChange,
 568 | 	      width: width,
 569 | 	      height: height
 570 | 	    });
 571 | 	  },
 572 | 	  handleKey: function handleKey(event) {
 573 | 	    // safari doesn't support event.key, so fall back to keyCode
 574 | 	    if (event.shiftKey) {
 575 | 	      if (event.key === 'ArrowUp' || event.keyCode === 38) {
 576 | 	        this.keyboardResize(-10);
 577 | 	        event.preventDefault();
 578 | 	      } else if (event.key === 'ArrowDown' || event.keyCode === 40) {
 579 | 	        this.keyboardResize(10);
 580 | 	        event.preventDefault();
 581 | 	      } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {
 582 | 	        this.keyboardResize(-10);
 583 | 	        event.preventDefault();
 584 | 	      } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
 585 | 	        this.keyboardResize(10);
 586 | 	        event.preventDefault();
 587 | 	      }
 588 | 	    } else {
 589 | 	      if (event.key === 'ArrowUp' || event.keyCode === 38) {
 590 | 	        this.moveBox(this.state.clientX, this.state.clientY, 0, -10);
 591 | 	        event.preventDefault();
 592 | 	      } else if (event.key === 'ArrowDown' || event.keyCode === 40) {
 593 | 	        this.moveBox(this.state.clientX, this.state.clientY, 0, 10);
 594 | 	        event.preventDefault();
 595 | 	      } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {
 596 | 	        this.moveBox(this.state.clientX, this.state.clientY, -10, 0);
 597 | 	        event.preventDefault();
 598 | 	      } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
 599 | 	        this.moveBox(this.state.clientX, this.state.clientY, 10, 0);
 600 | 	        event.preventDefault();
 601 | 	      }
 602 | 	    }
 603 | 	  },
 604 | 	  render: function render() {
 605 | 	    var style = {
 606 | 	      position: 'absolute',
 607 | 	      top: this.state.top,
 608 | 	      left: this.state.left,
 609 | 	      right: this.state.right,
 610 | 	      bottom: this.state.bottom
 611 | 	    };
 612 | 	
 613 | 	    var _calculateDimensions = this.calculateDimensions(this.state),
 614 | 	        width = _calculateDimensions.width,
 615 | 	        height = _calculateDimensions.height;
 616 | 	
 617 | 	    var topStyle = {
 618 | 	      height: this.state.top
 619 | 	    };
 620 | 	    var bottomStyle = {
 621 | 	      height: this.state.bottom
 622 | 	    };
 623 | 	    var leftStyle = {
 624 | 	      top: this.state.top,
 625 | 	      right: width + this.state.right,
 626 | 	      bottom: this.state.bottom
 627 | 	    };
 628 | 	    var rightStyle = {
 629 | 	      top: this.state.top,
 630 | 	      left: width + this.state.left,
 631 | 	      bottom: this.state.bottom
 632 | 	    };
 633 | 	
 634 | 	    return _react2.default.createElement(
 635 | 	      'div',
 636 | 	      { ref: 'box', className: 'DraggableResizable' },
 637 | 	      _react2.default.createElement(
 638 | 	        'div',
 639 | 	        { className: 'DraggableResizable-controls' },
 640 | 	        _react2.default.createElement(
 641 | 	          'label',
 642 | 	          null,
 643 | 	          this.props.offsetXLabel,
 644 | 	          _react2.default.createElement('input', {
 645 | 	            name: 'x',
 646 | 	            value: Math.round(this.state.left),
 647 | 	            onChange: this.controlsMoveBox,
 648 | 	            tabIndex: '-1',
 649 | 	            type: 'number' })
 650 | 	        ),
 651 | 	        _react2.default.createElement(
 652 | 	          'label',
 653 | 	          null,
 654 | 	          this.props.offsetYLabel,
 655 | 	          _react2.default.createElement('input', {
 656 | 	            name: 'y',
 657 | 	            value: Math.round(this.state.top),
 658 | 	            onChange: this.controlsMoveBox,
 659 | 	            tabIndex: '-1',
 660 | 	            type: 'number' })
 661 | 	        ),
 662 | 	        _react2.default.createElement(
 663 | 	          'label',
 664 | 	          null,
 665 | 	          this.props.widthLabel,
 666 | 	          _react2.default.createElement('input', {
 667 | 	            name: 'width',
 668 | 	            value: Math.round(width),
 669 | 	            type: 'number',
 670 | 	            tabIndex: '-1',
 671 | 	            onChange: this.controlsResize })
 672 | 	        ),
 673 | 	        _react2.default.createElement(
 674 | 	          'label',
 675 | 	          null,
 676 | 	          this.props.heightLabel,
 677 | 	          _react2.default.createElement('input', {
 678 | 	            value: Math.round(height),
 679 | 	            type: 'number',
 680 | 	            name: 'height',
 681 | 	            tabIndex: '-1',
 682 | 	            onChange: this.controlsResize })
 683 | 	        )
 684 | 	      ),
 685 | 	      _react2.default.createElement('div', { className: 'DraggableResizable-top', style: topStyle }),
 686 | 	      _react2.default.createElement('div', { className: 'DraggableResizable-left', style: leftStyle }),
 687 | 	      _react2.default.createElement(
 688 | 	        'div',
 689 | 	        { style: style, onMouseDown: this.startMove, onTouchStart: this.startMove },
 690 | 	        this.props.children,
 691 | 	        _react2.default.createElement('div', { className: 'resize-handle resize-handle-se',
 692 | 	          onMouseDown: this.startResize.bind(null, 'se'),
 693 | 	          onTouchStart: this.startResize.bind(null, 'se') }),
 694 | 	        _react2.default.createElement('div', { className: 'resize-handle resize-handle-ne',
 695 | 	          onMouseDown: this.startResize.bind(null, 'ne'),
 696 | 	          onTouchStart: this.startResize.bind(null, 'ne') }),
 697 | 	        _react2.default.createElement('div', { className: 'resize-handle resize-handle-sw',
 698 | 	          onMouseDown: this.startResize.bind(null, 'sw'),
 699 | 	          onTouchStart: this.startResize.bind(null, 'sw') }),
 700 | 	        _react2.default.createElement('div', { className: 'resize-handle resize-handle-nw',
 701 | 	          onMouseDown: this.startResize.bind(null, 'nw'),
 702 | 	          onTouchStart: this.startResize.bind(null, 'nw') })
 703 | 	      ),
 704 | 	      _react2.default.createElement('div', { className: 'DraggableResizable-right', style: rightStyle }),
 705 | 	      _react2.default.createElement('div', { className: 'DraggableResizable-bottom', style: bottomStyle })
 706 | 	    );
 707 | 	  }
 708 | 	});
 709 | 
 710 | /***/ },
 711 | /* 3 */
 712 | /***/ function(module, exports) {
 713 | 
 714 | 	
 715 | 	/**
 716 | 	 * Blob constructor.
 717 | 	 */
 718 | 	
 719 | 	var Blob = window.Blob;
 720 | 	
 721 | 	/**
 722 | 	 * ArrayBufferView support.
 723 | 	 */
 724 | 	
 725 | 	var hasArrayBufferView = new Blob([new Uint8Array(100)]).size == 100;
 726 | 	
 727 | 	/**
 728 | 	 * Return a `Blob` for the given data `uri`.
 729 | 	 *
 730 | 	 * @param {String} uri
 731 | 	 * @return {Blob}
 732 | 	 * @api public
 733 | 	 */
 734 | 	
 735 | 	module.exports = function(uri){
 736 | 	  var data = uri.split(',')[1];
 737 | 	  var bytes = atob(data);
 738 | 	  var buf = new ArrayBuffer(bytes.length);
 739 | 	  var arr = new Uint8Array(buf);
 740 | 	  for (var i = 0; i < bytes.length; i++) {
 741 | 	    arr[i] = bytes.charCodeAt(i);
 742 | 	  }
 743 | 	
 744 | 	  if (!hasArrayBufferView) arr = buf;
 745 | 	  var blob = new Blob([arr], { type: mime(uri) });
 746 | 	  blob.slice = blob.slice || blob.webkitSlice;
 747 | 	  return blob;
 748 | 	};
 749 | 	
 750 | 	/**
 751 | 	 * Return data uri mime type.
 752 | 	 */
 753 | 	
 754 | 	function mime(uri) {
 755 | 	  return uri.split(';')[0].slice(5);
 756 | 	}
 757 | 
 758 | 
 759 | /***/ },
 760 | /* 4 */
 761 | /***/ function(module, exports, __webpack_require__) {
 762 | 
 763 | 	// style-loader: Adds some css to the DOM by adding a <style> tag
 764 | 	
 765 | 	// load the styles
 766 | 	var content = __webpack_require__(5);
 767 | 	if(typeof content === 'string') content = [[module.id, content, '']];
 768 | 	// add the styles to the DOM
 769 | 	var update = __webpack_require__(7)(content, {});
 770 | 	if(content.locals) module.exports = content.locals;
 771 | 	// Hot Module Replacement
 772 | 	if(false) {
 773 | 		// When the styles change, update the <style> tags
 774 | 		if(!content.locals) {
 775 | 			module.hot.accept("!!./../node_modules/css-loader/index.js!./cropper.css", function() {
 776 | 				var newContent = require("!!./../node_modules/css-loader/index.js!./cropper.css");
 777 | 				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
 778 | 				update(newContent);
 779 | 			});
 780 | 		}
 781 | 		// When the module is disposed, remove the <style> tags
 782 | 		module.hot.dispose(function() { update(); });
 783 | 	}
 784 | 
 785 | /***/ },
 786 | /* 5 */
 787 | /***/ function(module, exports, __webpack_require__) {
 788 | 
 789 | 	exports = module.exports = __webpack_require__(6)();
 790 | 	// imports
 791 | 	
 792 | 	
 793 | 	// module
 794 | 	exports.push([module.id, ".Cropper{position:relative;display:inline-block;max-width:100%;max-height:100%}.box,.Cropper-box{position:absolute;top:0;left:0;bottom:0;right:0}.Cropper-box{cursor:move;border:1px solid #fff}.Cropper-canvas{visibility:hidden;position:absolute}.Cropper-image{vertical-align:middle;max-width:100%;position:relative;transform:translate(-50%,-50%);left:50%}.resize-handle{position:absolute;background-color:#eceeef;border:1px solid #8295ab;width:13px;height:13px;z-index:1}.resize-handle-se{bottom:0;right:0;cursor:nwse-resize;transform:translate(50%,50%)}.resize-handle-ne{right:0;top:0;cursor:nesw-resize;transform:translate(50%,-50%)}.resize-handle-sw{bottom:0;left:0;cursor:nesw-resize;transform:translate(-50%,50%)}.resize-handle-nw{top:0;bottom:0;cursor:nwse-resize;transform:translate(-50%,-50%)}.DraggableResizable{position:relative;width:100%;height:100%}.DraggableResizable-controls{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DraggableResizable-bottom,.DraggableResizable-left,.DraggableResizable-right,.DraggableResizable-top{position:absolute;background-color:rgba(0,0,0,.7)}.DraggableResizable-top{top:0;left:0;right:0}.DraggableResizable-bottom{bottom:0;left:0;right:0}.DraggableResizable-left{left:0}.DraggableResizable-right{right:0}", ""]);
 795 | 	
 796 | 	// exports
 797 | 
 798 | 
 799 | /***/ },
 800 | /* 6 */
 801 | /***/ function(module, exports) {
 802 | 
 803 | 	/*
 804 | 		MIT License http://www.opensource.org/licenses/mit-license.php
 805 | 		Author Tobias Koppers @sokra
 806 | 	*/
 807 | 	// css base code, injected by the css-loader
 808 | 	module.exports = function() {
 809 | 		var list = [];
 810 | 	
 811 | 		// return the list of modules as css string
 812 | 		list.toString = function toString() {
 813 | 			var result = [];
 814 | 			for(var i = 0; i < this.length; i++) {
 815 | 				var item = this[i];
 816 | 				if(item[2]) {
 817 | 					result.push("@media " + item[2] + "{" + item[1] + "}");
 818 | 				} else {
 819 | 					result.push(item[1]);
 820 | 				}
 821 | 			}
 822 | 			return result.join("");
 823 | 		};
 824 | 	
 825 | 		// import a list of modules into the list
 826 | 		list.i = function(modules, mediaQuery) {
 827 | 			if(typeof modules === "string")
 828 | 				modules = [[null, modules, ""]];
 829 | 			var alreadyImportedModules = {};
 830 | 			for(var i = 0; i < this.length; i++) {
 831 | 				var id = this[i][0];
 832 | 				if(typeof id === "number")
 833 | 					alreadyImportedModules[id] = true;
 834 | 			}
 835 | 			for(i = 0; i < modules.length; i++) {
 836 | 				var item = modules[i];
 837 | 				// skip already imported module
 838 | 				// this implementation is not 100% perfect for weird media query combinations
 839 | 				//  when a module is imported multiple times with different media queries.
 840 | 				//  I hope this will never occur (Hey this way we have smaller bundles)
 841 | 				if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
 842 | 					if(mediaQuery && !item[2]) {
 843 | 						item[2] = mediaQuery;
 844 | 					} else if(mediaQuery) {
 845 | 						item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
 846 | 					}
 847 | 					list.push(item);
 848 | 				}
 849 | 			}
 850 | 		};
 851 | 		return list;
 852 | 	};
 853 | 
 854 | 
 855 | /***/ },
 856 | /* 7 */
 857 | /***/ function(module, exports, __webpack_require__) {
 858 | 
 859 | 	/*
 860 | 		MIT License http://www.opensource.org/licenses/mit-license.php
 861 | 		Author Tobias Koppers @sokra
 862 | 	*/
 863 | 	var stylesInDom = {},
 864 | 		memoize = function(fn) {
 865 | 			var memo;
 866 | 			return function () {
 867 | 				if (typeof memo === "undefined") memo = fn.apply(this, arguments);
 868 | 				return memo;
 869 | 			};
 870 | 		},
 871 | 		isOldIE = memoize(function() {
 872 | 			return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
 873 | 		}),
 874 | 		getHeadElement = memoize(function () {
 875 | 			return document.head || document.getElementsByTagName("head")[0];
 876 | 		}),
 877 | 		singletonElement = null,
 878 | 		singletonCounter = 0,
 879 | 		styleElementsInsertedAtTop = [];
 880 | 	
 881 | 	module.exports = function(list, options) {
 882 | 		if(false) {
 883 | 			if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
 884 | 		}
 885 | 	
 886 | 		options = options || {};
 887 | 		// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 888 | 		// tags it will allow on a page
 889 | 		if (typeof options.singleton === "undefined") options.singleton = isOldIE();
 890 | 	
 891 | 		// By default, add <style> tags to the bottom of <head>.
 892 | 		if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
 893 | 	
 894 | 		var styles = listToStyles(list);
 895 | 		addStylesToDom(styles, options);
 896 | 	
 897 | 		return function update(newList) {
 898 | 			var mayRemove = [];
 899 | 			for(var i = 0; i < styles.length; i++) {
 900 | 				var item = styles[i];
 901 | 				var domStyle = stylesInDom[item.id];
 902 | 				domStyle.refs--;
 903 | 				mayRemove.push(domStyle);
 904 | 			}
 905 | 			if(newList) {
 906 | 				var newStyles = listToStyles(newList);
 907 | 				addStylesToDom(newStyles, options);
 908 | 			}
 909 | 			for(var i = 0; i < mayRemove.length; i++) {
 910 | 				var domStyle = mayRemove[i];
 911 | 				if(domStyle.refs === 0) {
 912 | 					for(var j = 0; j < domStyle.parts.length; j++)
 913 | 						domStyle.parts[j]();
 914 | 					delete stylesInDom[domStyle.id];
 915 | 				}
 916 | 			}
 917 | 		};
 918 | 	}
 919 | 	
 920 | 	function addStylesToDom(styles, options) {
 921 | 		for(var i = 0; i < styles.length; i++) {
 922 | 			var item = styles[i];
 923 | 			var domStyle = stylesInDom[item.id];
 924 | 			if(domStyle) {
 925 | 				domStyle.refs++;
 926 | 				for(var j = 0; j < domStyle.parts.length; j++) {
 927 | 					domStyle.parts[j](item.parts[j]);
 928 | 				}
 929 | 				for(; j < item.parts.length; j++) {
 930 | 					domStyle.parts.push(addStyle(item.parts[j], options));
 931 | 				}
 932 | 			} else {
 933 | 				var parts = [];
 934 | 				for(var j = 0; j < item.parts.length; j++) {
 935 | 					parts.push(addStyle(item.parts[j], options));
 936 | 				}
 937 | 				stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
 938 | 			}
 939 | 		}
 940 | 	}
 941 | 	
 942 | 	function listToStyles(list) {
 943 | 		var styles = [];
 944 | 		var newStyles = {};
 945 | 		for(var i = 0; i < list.length; i++) {
 946 | 			var item = list[i];
 947 | 			var id = item[0];
 948 | 			var css = item[1];
 949 | 			var media = item[2];
 950 | 			var sourceMap = item[3];
 951 | 			var part = {css: css, media: media, sourceMap: sourceMap};
 952 | 			if(!newStyles[id])
 953 | 				styles.push(newStyles[id] = {id: id, parts: [part]});
 954 | 			else
 955 | 				newStyles[id].parts.push(part);
 956 | 		}
 957 | 		return styles;
 958 | 	}
 959 | 	
 960 | 	function insertStyleElement(options, styleElement) {
 961 | 		var head = getHeadElement();
 962 | 		var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
 963 | 		if (options.insertAt === "top") {
 964 | 			if(!lastStyleElementInsertedAtTop) {
 965 | 				head.insertBefore(styleElement, head.firstChild);
 966 | 			} else if(lastStyleElementInsertedAtTop.nextSibling) {
 967 | 				head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
 968 | 			} else {
 969 | 				head.appendChild(styleElement);
 970 | 			}
 971 | 			styleElementsInsertedAtTop.push(styleElement);
 972 | 		} else if (options.insertAt === "bottom") {
 973 | 			head.appendChild(styleElement);
 974 | 		} else {
 975 | 			throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
 976 | 		}
 977 | 	}
 978 | 	
 979 | 	function removeStyleElement(styleElement) {
 980 | 		styleElement.parentNode.removeChild(styleElement);
 981 | 		var idx = styleElementsInsertedAtTop.indexOf(styleElement);
 982 | 		if(idx >= 0) {
 983 | 			styleElementsInsertedAtTop.splice(idx, 1);
 984 | 		}
 985 | 	}
 986 | 	
 987 | 	function createStyleElement(options) {
 988 | 		var styleElement = document.createElement("style");
 989 | 		styleElement.type = "text/css";
 990 | 		insertStyleElement(options, styleElement);
 991 | 		return styleElement;
 992 | 	}
 993 | 	
 994 | 	function createLinkElement(options) {
 995 | 		var linkElement = document.createElement("link");
 996 | 		linkElement.rel = "stylesheet";
 997 | 		insertStyleElement(options, linkElement);
 998 | 		return linkElement;
 999 | 	}
1000 | 	
1001 | 	function addStyle(obj, options) {
1002 | 		var styleElement, update, remove;
1003 | 	
1004 | 		if (options.singleton) {
1005 | 			var styleIndex = singletonCounter++;
1006 | 			styleElement = singletonElement || (singletonElement = createStyleElement(options));
1007 | 			update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
1008 | 			remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
1009 | 		} else if(obj.sourceMap &&
1010 | 			typeof URL === "function" &&
1011 | 			typeof URL.createObjectURL === "function" &&
1012 | 			typeof URL.revokeObjectURL === "function" &&
1013 | 			typeof Blob === "function" &&
1014 | 			typeof btoa === "function") {
1015 | 			styleElement = createLinkElement(options);
1016 | 			update = updateLink.bind(null, styleElement);
1017 | 			remove = function() {
1018 | 				removeStyleElement(styleElement);
1019 | 				if(styleElement.href)
1020 | 					URL.revokeObjectURL(styleElement.href);
1021 | 			};
1022 | 		} else {
1023 | 			styleElement = createStyleElement(options);
1024 | 			update = applyToTag.bind(null, styleElement);
1025 | 			remove = function() {
1026 | 				removeStyleElement(styleElement);
1027 | 			};
1028 | 		}
1029 | 	
1030 | 		update(obj);
1031 | 	
1032 | 		return function updateStyle(newObj) {
1033 | 			if(newObj) {
1034 | 				if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
1035 | 					return;
1036 | 				update(obj = newObj);
1037 | 			} else {
1038 | 				remove();
1039 | 			}
1040 | 		};
1041 | 	}
1042 | 	
1043 | 	var replaceText = (function () {
1044 | 		var textStore = [];
1045 | 	
1046 | 		return function (index, replacement) {
1047 | 			textStore[index] = replacement;
1048 | 			return textStore.filter(Boolean).join('\n');
1049 | 		};
1050 | 	})();
1051 | 	
1052 | 	function applyToSingletonTag(styleElement, index, remove, obj) {
1053 | 		var css = remove ? "" : obj.css;
1054 | 	
1055 | 		if (styleElement.styleSheet) {
1056 | 			styleElement.styleSheet.cssText = replaceText(index, css);
1057 | 		} else {
1058 | 			var cssNode = document.createTextNode(css);
1059 | 			var childNodes = styleElement.childNodes;
1060 | 			if (childNodes[index]) styleElement.removeChild(childNodes[index]);
1061 | 			if (childNodes.length) {
1062 | 				styleElement.insertBefore(cssNode, childNodes[index]);
1063 | 			} else {
1064 | 				styleElement.appendChild(cssNode);
1065 | 			}
1066 | 		}
1067 | 	}
1068 | 	
1069 | 	function applyToTag(styleElement, obj) {
1070 | 		var css = obj.css;
1071 | 		var media = obj.media;
1072 | 	
1073 | 		if(media) {
1074 | 			styleElement.setAttribute("media", media)
1075 | 		}
1076 | 	
1077 | 		if(styleElement.styleSheet) {
1078 | 			styleElement.styleSheet.cssText = css;
1079 | 		} else {
1080 | 			while(styleElement.firstChild) {
1081 | 				styleElement.removeChild(styleElement.firstChild);
1082 | 			}
1083 | 			styleElement.appendChild(document.createTextNode(css));
1084 | 		}
1085 | 	}
1086 | 	
1087 | 	function updateLink(linkElement, obj) {
1088 | 		var css = obj.css;
1089 | 		var sourceMap = obj.sourceMap;
1090 | 	
1091 | 		if(sourceMap) {
1092 | 			// http://stackoverflow.com/a/26603875
1093 | 			css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
1094 | 		}
1095 | 	
1096 | 		var blob = new Blob([css], { type: "text/css" });
1097 | 	
1098 | 		var oldSrc = linkElement.href;
1099 | 	
1100 | 		linkElement.href = URL.createObjectURL(blob);
1101 | 	
1102 | 		if(oldSrc)
1103 | 			URL.revokeObjectURL(oldSrc);
1104 | 	}
1105 | 
1106 | 
1107 | /***/ }
1108 | /******/ ])
1109 | });
1110 | ;
1111 | //# sourceMappingURL=react-crop.js.map


--------------------------------------------------------------------------------
/dist/react-crop.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 00d181a09bb90d627970","webpack:///./lib/index.src.js","webpack:///external \"react\"","webpack:///./lib/draggable-resizable-box.js","webpack:///./~/data-uri-to-blob/index.js","webpack:///./lib/cropper.css?96ef","webpack:///./lib/cropper.css","webpack:///./~/css-loader/lib/css-base.js","webpack:///./~/style-loader/addStyles.js"],"names":["createClass","displayName","propTypes","width","PropTypes","number","isRequired","height","center","bool","image","any","widthLabel","string","heightLabel","offsetXLabel","offsetYLabel","onImageLoaded","func","minConstraints","arrayOf","getDefaultProps","getInitialState","imageLoaded","props","url","window","URL","createObjectURL","componentWillReceiveProps","nextProps","setState","shouldComponentUpdate","nextState","size","name","type","state","onLoad","evt","box","refs","getBoundingClientRect","img","cropImage","Promise","resolve","reject","Image","onload","canvas","ctx","getContext","xScale","naturalWidth","yScale","naturalHeight","imageOffsetX","offset","left","imageOffsetY","top","imageWidth","dimensions","imageHeight","canvasOffsetX","Math","floor","canvasOffsetY","canvasWidth","canvasHeight","clearRect","drawImage","toDataURL","src","onChange","render","minWidth","minHeight","aspectRatio","array","children","node","preserveAspectRatio","centerYOffset","centerXOffset","bottom","right","componentDidMount","document","addEventListener","eventMove","eventEnd","handleKey","componentWillUnmount","removeEventListener","calculateDimensions","max","currentAspectRatio","constrainBoundary","side","getClientCoordinates","touches","clientX","clientY","resizing","onResize","moving","eventMoveBox","stopResize","stopMove","startResize","corner","event","stopPropagation","preventDefault","nw","mousePos","boxPos","pos","ne","se","sw","parentElement","coordinates","position","resize","controlsResize","target","value","widthDifference","heightDifference","widthChanged","heightChanged","startMove","movedX","movedY","moveBox","controlsMoveBox","keyboardResize","change","widthChange","heightChange","shiftKey","key","keyCode","style","topStyle","bottomStyle","leftStyle","rightStyle","round","bind"],"mappings":"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Q;;AAEvzC;;;;;;;ACPA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,iBAAgB,iBAAiB;AACjC;AACA;AACA,yCAAwC,gBAAgB;AACxD,KAAI;AACJ;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,iBAAgB,iBAAiB;AACjC;AACA;AACA;AACA;AACA,aAAY,oBAAoB;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;ACjDA;AACA;AACA;AACA;AACA,qBAAoB;AACpB;AACA;AACA;AACA;AACA;AACA;AACA,GAAE;AACF;AACA;AACA,GAAE;AACF;AACA;AACA,GAAE;AACF;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,iBAAgB,mBAAmB;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAgB,sBAAsB;AACtC;AACA;AACA,mBAAkB,2BAA2B;AAC7C;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,gBAAe,mBAAmB;AAClC;AACA;AACA;AACA;AACA,kBAAiB,2BAA2B;AAC5C;AACA;AACA,SAAQ,uBAAuB;AAC/B;AACA;AACA,IAAG;AACH;AACA,kBAAiB,uBAAuB;AACxC;AACA;AACA,4BAA2B;AAC3B;AACA;AACA;;AAEA;AACA;AACA;AACA,gBAAe,iBAAiB;AAChC;AACA;AACA;AACA;AACA;AACA,eAAc;AACd;AACA,iCAAgC,sBAAsB;AACtD;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA,IAAG;AACH;AACA;AACA;AACA,GAAE;AACF;AACA,GAAE;AACF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,EAAC;;AAED;AACA;;AAEA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,wDAAuD;AACvD;;AAEA,8BAA6B,mBAAmB;;AAEhD;;AAEA;;AAEA;AACA;AACA","file":"react-crop.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactCrop\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"ReactCrop\"] = factory(root[\"react\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 00d181a09bb90d627970\n **/","import React from 'react'\nimport DraggableResizableBox from './draggable-resizable-box'\nimport toBlob from 'data-uri-to-blob'\nimport './cropper.css'\n\nexport default React.createClass({\n  displayName: 'Cropper',\n\n  propTypes: {\n    width: React.PropTypes.number.isRequired,\n    height: React.PropTypes.number.isRequired,\n    center: React.PropTypes.bool,\n    image: React.PropTypes.any,\n    widthLabel: React.PropTypes.string,\n    heightLabel: React.PropTypes.string,\n    offsetXLabel: React.PropTypes.string,\n    offsetYLabel: React.PropTypes.string,\n    onImageLoaded: React.PropTypes.func,\n    minConstraints: React.PropTypes.arrayOf(React.PropTypes.number)\n  },\n\n  getDefaultProps () {\n    return {\n      center: false,\n      width: 'Width',\n      height: 'Height',\n      offsetXLabel: 'Offset X',\n      offsetYLabel: 'Offset Y'\n    }\n  },\n\n  getInitialState () {\n    return {\n      imageLoaded: false,\n      width: this.props.width,\n      height: this.props.height,\n      url: window.URL.createObjectURL(this.props.image)\n    }\n  },\n\n  componentWillReceiveProps (nextProps) {\n    if (this.props.image !== nextProps.image) {\n      this.setState({\n        url: window.URL.createObjectURL(nextProps.image),\n        imageLoaded: false\n      })\n    }\n  },\n\n  shouldComponentUpdate (nextProps, nextState) {\n    let {image} = this.props\n    return nextProps.image.size !== image.size ||\n        nextProps.image.name !== image.name ||\n        nextProps.image.type !== image.type ||\n        nextState.imageLoaded !== this.state.imageLoaded\n  },\n\n  onLoad (evt) {\n    let box = this.refs.box.getBoundingClientRect()\n    this.setState({\n      imageLoaded: true,\n      width: box.width,\n      height: box.height\n    }, () => {\n      let img = this.refs.image\n      this.props.onImageLoaded && this.props.onImageLoaded(img)\n    })\n  },\n\n  cropImage () {\n    return new Promise((resolve, reject) => {\n      let img = new Image()\n      img.onload = () => {\n        let canvas = this.refs.canvas\n        let img = this.refs.image\n        let ctx = canvas.getContext('2d')\n        let [xScale, yScale] = [img.naturalWidth / this.state.width,\n                                img.naturalHeight / this.state.height]\n\n        let imageOffsetX = xScale < 1 ? 0 : this.state.offset.left * xScale\n        let imageOffsetY = yScale < 1 ? 0 : this.state.offset.top * yScale\n        let imageWidth = xScale < 1 ? img.naturalWidth : this.state.dimensions.width * xScale\n        let imageHeight = yScale < 1 ? img.naturalHeight : this.state.dimensions.height * yScale\n\n        let canvasOffsetX = xScale < 1 ? Math.floor((this.state.dimensions.width - img.naturalWidth) / 2) : 0\n        let canvasOffsetY = yScale < 1 ? Math.floor((this.state.dimensions.height - img.naturalHeight) / 2) : 0\n        let canvasWidth = xScale < 1 ? img.naturalWidth : this.props.width\n        let canvasHeight = yScale < 1 ? img.naturalHeight : this.props.height\n\n        ctx.clearRect(0, 0, this.props.width, this.props.height)\n        ctx.drawImage(img, imageOffsetX, imageOffsetY, imageWidth, imageHeight, canvasOffsetX, canvasOffsetY, canvasWidth, canvasHeight)\n        resolve(toBlob(canvas.toDataURL()))\n      }\n      img.src = window.URL.createObjectURL(this.props.image)\n    })\n  },\n\n  onChange (offset, dimensions) {\n    this.setState({offset, dimensions})\n  },\n\n  render () {\n    return (\n      <div\n        ref='box'\n        className='Cropper'\n        style={{\n          minWidth: this.props.width,\n          minHeight: this.props.height\n        }}>\n        <canvas\n          className='Cropper-canvas'\n          ref='canvas'\n          width={this.props.width}\n          height={this.props.height}>\n        </canvas>\n        <img\n          ref='image'\n          src={this.state.url}\n          className='Cropper-image'\n          onLoad={this.onLoad}\n          style={{top: this.state.height / 2}}/>\n        {this.state.imageLoaded &&\n          <div className='box'>\n            <DraggableResizableBox\n              aspectRatio={this.props.width / this.props.height}\n              width={this.state.width}\n              height={this.state.height}\n              minConstraints={this.props.minConstraints}\n              onChange={this.onChange}\n              widthLabel={this.props.widthLabel}\n              heightLabel={this.props.heightLabel}\n              offsetXLabel={this.props.offsetXLabel}\n              offsetYLabel={this.props.offsetYLabel}>\n                <div className='Cropper-box'></div>\n            </DraggableResizableBox>\n          </div>}\n      </div>\n    )\n  }\n})\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/index.src.js\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"react\"\n ** module id = 1\n ** module chunks = 0 1\n **/","import React from 'react'\n\nexport default React.createClass({\n  displayName: 'DraggableResizableBox',\n\n  propTypes: {\n    aspectRatio: React.PropTypes.number.isRequired,\n    width: React.PropTypes.number.isRequired,\n    height: React.PropTypes.number.isRequired,\n    onChange: React.PropTypes.func,\n    offset: React.PropTypes.array,\n    minConstraints: React.PropTypes.array,\n    children: React.PropTypes.node,\n    widthLabel: React.PropTypes.string,\n    heightLabel: React.PropTypes.string,\n    offsetXLabel: React.PropTypes.string,\n    offsetYLabel: React.PropTypes.string\n  },\n\n  getDefaultProps () {\n    return {\n      widthLabel: 'Width',\n      heightLabel: 'Height',\n      offsetXLabel: 'Offset X',\n      offsetYLabel: 'Offset Y'\n    }\n  },\n\n  getInitialState () {\n    let [width, height] = this.preserveAspectRatio(this.props.width, this.props.height)\n    let centerYOffset = (this.props.height - height) / 2\n    let centerXOffset = (this.props.width - width) / 2\n    return {\n      top: centerYOffset,\n      left: centerXOffset,\n      bottom: centerYOffset,\n      right: centerXOffset,\n      width: width,\n      height: height\n    }\n  },\n\n  componentDidMount () {\n    document.addEventListener('mousemove', this.eventMove)\n    document.addEventListener('mouseup', this.eventEnd)\n    document.addEventListener('touchmove', this.eventMove)\n    document.addEventListener('touchend', this.eventEnd)\n    document.addEventListener('keydown', this.handleKey)\n    this.props.onChange({\n        top: this.state.top,\n        left: this.state.left\n    }, {\n      width: this.state.width,\n      height: this.state.height\n    })\n  },\n\n  componentWillUnmount () {\n    document.removeEventListener('mousemove', this.eventMove)\n    document.removeEventListener('mouseup', this.eventEnd)\n    document.removeEventListener('touchmove', this.eventMove)\n    document.removeEventListener('touchend', this.eventEnd)\n    document.removeEventListener('keydown', this.handleKey)\n  },\n\n  calculateDimensions ({top, left, bottom, right}) {\n    return {width: this.props.width - left - right, height: this.props.height - top - bottom}\n  },\n\n  // If you do this, be careful of constraints\n  preserveAspectRatio (width, height) {\n    if(this.props.minConstraints) {\n      width = Math.max(width, this.props.minConstraints[0])\n      height = Math.max(height, this.props.minConstraints[1])\n    }\n    const currentAspectRatio = width / height\n\n    if (currentAspectRatio < this.props.aspectRatio) {\n      return [width, width / this.props.aspectRatio]\n    } else if (currentAspectRatio > this.props.aspectRatio) {\n      return [height * this.props.aspectRatio, height]\n    } else {\n      return [width, height]\n    }\n  },\n\n  constrainBoundary (side) {\n    return side < 0 ? 0 : side\n  },\n\n  getClientCoordinates (evt) {\n    return evt.touches ? {\n      clientX: evt.touches[0].clientX,\n      clientY: evt.touches[0].clientY\n    } :\n    {\n      clientX: evt.clientX,\n      clientY: evt.clientY\n    }\n  },\n\n  eventMove (evt) {\n    if (this.state.resizing) {\n      this.onResize(evt)\n    } else if (this.state.moving) {\n      this.eventMoveBox(evt)\n    }\n  },\n\n  eventEnd (evt) {\n    if (this.state.resizing) {\n      this.stopResize(evt)\n    } else if (this.state.moving) {\n      this.stopMove(evt)\n    }\n  },\n\n  // Resize methods\n  startResize (corner, event) {\n    event.stopPropagation()\n    event.preventDefault()\n    this.setState({\n      resizing: true,\n      corner\n    })\n  },\n\n  stopResize () {\n    this.setState({resizing: false})\n  },\n\n  // resize strategies\n  nw (mousePos, boxPos) {\n    let pos = Object.assign({}, this.state, {\n      top: this.constrainBoundary(mousePos.clientY - boxPos.top),\n      left: this.constrainBoundary(mousePos.clientX - boxPos.left)\n    })\n    let dimensions = this.calculateDimensions(pos)\n    let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)\n    pos.top = this.props.height - pos.bottom - height\n    pos.left = this.props.width - pos.right - width\n    return pos\n  },\n  ne (mousePos, boxPos) {\n    let pos = Object.assign({}, this.state, {\n      top: this.constrainBoundary(mousePos.clientY - boxPos.top),\n      right: this.constrainBoundary(boxPos.right - mousePos.clientX)\n    })\n    let dimensions = this.calculateDimensions(pos)\n    let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)\n    pos.top = this.props.height - pos.bottom - height\n    pos.right = this.props.width - pos.left - width\n    return pos\n  },\n  se (mousePos, boxPos) {\n    let pos = Object.assign({}, this.state, {\n      bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),\n      right: this.constrainBoundary(boxPos.right - mousePos.clientX)\n    })\n    let dimensions = this.calculateDimensions(pos)\n    let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)\n    pos.bottom = this.props.height - pos.top - height\n    pos.right = this.props.width - pos.left - width\n    return pos\n  },\n  sw (mousePos, boxPos) {\n    let pos = Object.assign({}, this.state, {\n      bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),\n      left: this.constrainBoundary(mousePos.clientX - boxPos.left)\n    })\n    let dimensions = this.calculateDimensions(pos)\n    let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)\n    pos.bottom = this.props.height - pos.top - height\n    pos.left = this.props.width - pos.right - width\n    return pos\n  },\n\n  onResize (event) {\n    let box = this.refs.box.parentElement.parentElement.getBoundingClientRect()\n    let coordinates = this.getClientCoordinates(event)\n    let position = this[this.state.corner](coordinates, box)\n    this.resize(position, coordinates)\n  },\n\n  controlsResize (event) {\n    let box = this.refs.box.parentElement.parentElement.getBoundingClientRect()\n    let width = event.target.name === 'width' ? +event.target.value : +event.target.value * this.props.aspectRatio\n    let height = event.target.name === 'height' ? +event.target.value : +event.target.value / this.props.aspectRatio\n    let dimensions = this.preserveAspectRatio(width, height)\n    width = dimensions[0]\n    height = dimensions[1]\n\n    if (width > box.width - this.state.left ||\n        height > box.height - this.state.top) return\n\n    let widthDifference = this.state.width - width\n    let heightDifference = this.state.height - height\n    let pos = Object.assign({}, this.state, {\n      right: this.state.right + widthDifference,\n      bottom: this.state.bottom + heightDifference\n    })\n    let coordinates = {\n      clientX: box.right - pos.right,\n      clientY: box.bottom - pos.bottom\n    }\n\n    this.resize(pos, coordinates)\n  },\n\n  resize (position, coordinates) {\n    let dimensions = this.calculateDimensions(position)\n    var widthChanged = dimensions.width !== this.state.width, heightChanged = dimensions.height !== this.state.height\n    if (!widthChanged && !heightChanged) return\n\n    this.setState(Object.assign({}, coordinates, position, dimensions), () => {\n      this.props.onChange({\n        top: position.top,\n        left: position.left\n      }, dimensions)\n    })\n  },\n\n  // Move methods\n  startMove (evt) {\n    let {clientX, clientY} = this.getClientCoordinates(evt)\n    this.setState({\n      moving: true,\n      clientX: clientX,\n      clientY: clientY\n    })\n  },\n\n  stopMove (evt) {\n    this.setState({\n      moving: false\n    })\n  },\n\n  eventMoveBox (evt) {\n    evt.preventDefault()\n    let {clientX, clientY} = this.getClientCoordinates(evt)\n    let movedX = clientX - this.state.clientX\n    let movedY = clientY - this.state.clientY\n\n    this.moveBox(clientX, clientY, movedX, movedY)\n  },\n\n  controlsMoveBox (evt) {\n    let movedX = evt.target.name === 'x' ? evt.target.value - this.state.left : 0\n    let movedY = evt.target.name === 'y' ? evt.target.value - this.state.top : 0\n    this.moveBox(0, 0, movedX, movedY)\n  },\n\n  moveBox (clientX, clientY, movedX, movedY) {\n    let position = {\n      top: this.constrainBoundary(this.state.top + movedY),\n      left: this.constrainBoundary(this.state.left + movedX),\n      bottom: this.constrainBoundary(this.state.bottom - movedY),\n      right: this.constrainBoundary(this.state.right - movedX)\n    }\n\n    if (!position.top) {\n      position.bottom = this.props.height - this.state.height\n    }\n    if (!position.bottom) {\n      position.top = this.props.height - this.state.height\n    }\n    if (!position.left) {\n      position.right = this.props.width - this.state.width\n    }\n    if (!position.right) {\n      position.left = this.props.width - this.state.width\n    }\n\n    this.setState(Object.assign({}, {\n      clientX: clientX,\n      clientY: clientY\n    }, position), () => {\n      this.props.onChange({\n        top: position.top,\n        left: position.left\n      }, this.calculateDimensions(position))\n    })\n  },\n\n  keyboardResize (change) {\n    if (this.state.right - change < 0) { return }\n    if (this.state.bottom - change < 0) { return }\n\n    const [width, height] = this.preserveAspectRatio(\n      this.state.width + change,\n      this.state.height + change\n    )\n    const widthChange = width - this.state.width\n    const heightChange = height - this.state.height\n\n    this.setState({\n      bottom: this.state.bottom - heightChange,\n      right: this.state.right - widthChange,\n      width,\n      height\n    })\n  },\n\n  handleKey (event) {\n    // safari doesn't support event.key, so fall back to keyCode\n    if (event.shiftKey) {\n      if (event.key === 'ArrowUp' || event.keyCode === 38) {\n        this.keyboardResize(-10)\n        event.preventDefault()\n      } else if (event.key === 'ArrowDown' || event.keyCode === 40) {\n        this.keyboardResize(10)\n        event.preventDefault()\n      } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {\n        this.keyboardResize(-10)\n        event.preventDefault()\n      } else if (event.key === 'ArrowRight' || event.keyCode === 39) {\n        this.keyboardResize(10)\n        event.preventDefault()\n      }\n    } else {\n      if (event.key === 'ArrowUp' || event.keyCode === 38) {\n        this.moveBox(this.state.clientX, this.state.clientY, 0, -10)\n        event.preventDefault()\n      } else if (event.key === 'ArrowDown' || event.keyCode === 40) {\n        this.moveBox(this.state.clientX, this.state.clientY, 0, 10)\n        event.preventDefault()\n      } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {\n        this.moveBox(this.state.clientX, this.state.clientY, -10, 0)\n        event.preventDefault()\n      } else if (event.key === 'ArrowRight' || event.keyCode === 39) {\n        this.moveBox(this.state.clientX, this.state.clientY, 10, 0)\n        event.preventDefault()\n      }\n    }\n  },\n\n  render () {\n    let style = {\n      position: 'absolute',\n      top: this.state.top,\n      left: this.state.left,\n      right: this.state.right,\n      bottom: this.state.bottom\n    }\n    let {width, height} = this.calculateDimensions(this.state)\n    let topStyle = {\n      height: this.state.top\n    }\n    let bottomStyle = {\n      height: this.state.bottom\n    }\n    let leftStyle = {\n      top: this.state.top,\n      right: width + this.state.right,\n      bottom: this.state.bottom\n    }\n    let rightStyle = {\n      top: this.state.top,\n      left: width + this.state.left,\n      bottom: this.state.bottom\n    }\n\n    return (\n      <div ref='box' className='DraggableResizable'>\n        <div className='DraggableResizable-controls'>\n          <label>\n            {this.props.offsetXLabel}\n            <input\n              name='x'\n              value={Math.round(this.state.left)}\n              onChange={this.controlsMoveBox}\n              tabIndex=\"-1\"\n              type='number' />\n          </label>\n          <label>\n            {this.props.offsetYLabel}\n            <input\n              name='y'\n              value={Math.round(this.state.top)}\n              onChange={this.controlsMoveBox}\n              tabIndex=\"-1\"\n              type='number' />\n          </label>\n          <label>\n            {this.props.widthLabel}\n            <input\n              name='width'\n              value={Math.round(width)}\n              type='number'\n              tabIndex=\"-1\"\n              onChange={this.controlsResize} />\n          </label>\n          <label>\n            {this.props.heightLabel}\n            <input\n              value={Math.round(height)}\n              type='number'\n              name='height'\n              tabIndex=\"-1\"\n              onChange={this.controlsResize} />\n          </label>\n        </div>\n        <div className='DraggableResizable-top' style={topStyle}></div>\n        <div className='DraggableResizable-left' style={leftStyle}></div>\n        <div style={style} onMouseDown={this.startMove} onTouchStart={this.startMove}>\n          {this.props.children}\n          <div className='resize-handle resize-handle-se'\n            onMouseDown={this.startResize.bind(null, 'se')}\n            onTouchStart={this.startResize.bind(null, 'se')}>\n          </div>\n          <div className='resize-handle resize-handle-ne'\n            onMouseDown={this.startResize.bind(null, 'ne')}\n            onTouchStart={this.startResize.bind(null, 'ne')}>\n          </div>\n          <div className='resize-handle resize-handle-sw'\n            onMouseDown={this.startResize.bind(null, 'sw')}\n            onTouchStart={this.startResize.bind(null, 'sw')}>\n          </div>\n          <div className='resize-handle resize-handle-nw'\n            onMouseDown={this.startResize.bind(null, 'nw')}\n            onTouchStart={this.startResize.bind(null, 'nw')}>\n          </div>\n        </div>\n        <div className='DraggableResizable-right' style={rightStyle}></div>\n        <div className='DraggableResizable-bottom' style={bottomStyle}></div>\n      </div>\n    )\n  }\n})\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/draggable-resizable-box.js\n **/","\n/**\n * Blob constructor.\n */\n\nvar Blob = window.Blob;\n\n/**\n * ArrayBufferView support.\n */\n\nvar hasArrayBufferView = new Blob([new Uint8Array(100)]).size == 100;\n\n/**\n * Return a `Blob` for the given data `uri`.\n *\n * @param {String} uri\n * @return {Blob}\n * @api public\n */\n\nmodule.exports = function(uri){\n  var data = uri.split(',')[1];\n  var bytes = atob(data);\n  var buf = new ArrayBuffer(bytes.length);\n  var arr = new Uint8Array(buf);\n  for (var i = 0; i < bytes.length; i++) {\n    arr[i] = bytes.charCodeAt(i);\n  }\n\n  if (!hasArrayBufferView) arr = buf;\n  var blob = new Blob([arr], { type: mime(uri) });\n  blob.slice = blob.slice || blob.webkitSlice;\n  return blob;\n};\n\n/**\n * Return data uri mime type.\n */\n\nfunction mime(uri) {\n  return uri.split(';')[0].slice(5);\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/data-uri-to-blob/index.js\n ** module id = 3\n ** module chunks = 0 1\n **/","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!./../node_modules/css-loader/index.js!./cropper.css\");\nif(typeof content === 'string') content = [[module.id, content, '']];\n// add the styles to the DOM\nvar update = require(\"!./../node_modules/style-loader/addStyles.js\")(content, {});\nif(content.locals) module.exports = content.locals;\n// Hot Module Replacement\nif(module.hot) {\n\t// When the styles change, update the <style> tags\n\tif(!content.locals) {\n\t\tmodule.hot.accept(\"!!./../node_modules/css-loader/index.js!./cropper.css\", function() {\n\t\t\tvar newContent = require(\"!!./../node_modules/css-loader/index.js!./cropper.css\");\n\t\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\t\t\tupdate(newContent);\n\t\t});\n\t}\n\t// When the module is disposed, remove the <style> tags\n\tmodule.hot.dispose(function() { update(); });\n}\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./lib/cropper.css\n ** module id = 4\n ** module chunks = 0 1\n **/","exports = module.exports = require(\"./../node_modules/css-loader/lib/css-base.js\")();\n// imports\n\n\n// module\nexports.push([module.id, \".Cropper{position:relative;display:inline-block;max-width:100%;max-height:100%}.box,.Cropper-box{position:absolute;top:0;left:0;bottom:0;right:0}.Cropper-box{cursor:move;border:1px solid #fff}.Cropper-canvas{visibility:hidden;position:absolute}.Cropper-image{vertical-align:middle;max-width:100%;position:relative;transform:translate(-50%,-50%);left:50%}.resize-handle{position:absolute;background-color:#eceeef;border:1px solid #8295ab;width:13px;height:13px;z-index:1}.resize-handle-se{bottom:0;right:0;cursor:nwse-resize;transform:translate(50%,50%)}.resize-handle-ne{right:0;top:0;cursor:nesw-resize;transform:translate(50%,-50%)}.resize-handle-sw{bottom:0;left:0;cursor:nesw-resize;transform:translate(-50%,50%)}.resize-handle-nw{top:0;bottom:0;cursor:nwse-resize;transform:translate(-50%,-50%)}.DraggableResizable{position:relative;width:100%;height:100%}.DraggableResizable-controls{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DraggableResizable-bottom,.DraggableResizable-left,.DraggableResizable-right,.DraggableResizable-top{position:absolute;background-color:rgba(0,0,0,.7)}.DraggableResizable-top{top:0;left:0;right:0}.DraggableResizable-bottom{bottom:0;left:0;right:0}.DraggableResizable-left{left:0}.DraggableResizable-right{right:0}\", \"\"]);\n\n// exports\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/css-loader!./lib/cropper.css\n ** module id = 5\n ** module chunks = 0 1\n **/","/*\r\n\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\tAuthor Tobias Koppers @sokra\r\n*/\r\n// css base code, injected by the css-loader\r\nmodule.exports = function() {\r\n\tvar list = [];\r\n\r\n\t// return the list of modules as css string\r\n\tlist.toString = function toString() {\r\n\t\tvar result = [];\r\n\t\tfor(var i = 0; i < this.length; i++) {\r\n\t\t\tvar item = this[i];\r\n\t\t\tif(item[2]) {\r\n\t\t\t\tresult.push(\"@media \" + item[2] + \"{\" + item[1] + \"}\");\r\n\t\t\t} else {\r\n\t\t\t\tresult.push(item[1]);\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn result.join(\"\");\r\n\t};\r\n\r\n\t// import a list of modules into the list\r\n\tlist.i = function(modules, mediaQuery) {\r\n\t\tif(typeof modules === \"string\")\r\n\t\t\tmodules = [[null, modules, \"\"]];\r\n\t\tvar alreadyImportedModules = {};\r\n\t\tfor(var i = 0; i < this.length; i++) {\r\n\t\t\tvar id = this[i][0];\r\n\t\t\tif(typeof id === \"number\")\r\n\t\t\t\talreadyImportedModules[id] = true;\r\n\t\t}\r\n\t\tfor(i = 0; i < modules.length; i++) {\r\n\t\t\tvar item = modules[i];\r\n\t\t\t// skip already imported module\r\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\r\n\t\t\t//  when a module is imported multiple times with different media queries.\r\n\t\t\t//  I hope this will never occur (Hey this way we have smaller bundles)\r\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\r\n\t\t\t\tif(mediaQuery && !item[2]) {\r\n\t\t\t\t\titem[2] = mediaQuery;\r\n\t\t\t\t} else if(mediaQuery) {\r\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\r\n\t\t\t\t}\r\n\t\t\t\tlist.push(item);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\treturn list;\r\n};\r\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/css-loader/lib/css-base.js\n ** module id = 6\n ** module chunks = 0 1\n **/","/*\r\n\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\tAuthor Tobias Koppers @sokra\r\n*/\r\nvar stylesInDom = {},\r\n\tmemoize = function(fn) {\r\n\t\tvar memo;\r\n\t\treturn function () {\r\n\t\t\tif (typeof memo === \"undefined\") memo = fn.apply(this, arguments);\r\n\t\t\treturn memo;\r\n\t\t};\r\n\t},\r\n\tisOldIE = memoize(function() {\r\n\t\treturn /msie [6-9]\\b/.test(window.navigator.userAgent.toLowerCase());\r\n\t}),\r\n\tgetHeadElement = memoize(function () {\r\n\t\treturn document.head || document.getElementsByTagName(\"head\")[0];\r\n\t}),\r\n\tsingletonElement = null,\r\n\tsingletonCounter = 0,\r\n\tstyleElementsInsertedAtTop = [];\r\n\r\nmodule.exports = function(list, options) {\r\n\tif(typeof DEBUG !== \"undefined\" && DEBUG) {\r\n\t\tif(typeof document !== \"object\") throw new Error(\"The style-loader cannot be used in a non-browser environment\");\r\n\t}\r\n\r\n\toptions = options || {};\r\n\t// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\r\n\t// tags it will allow on a page\r\n\tif (typeof options.singleton === \"undefined\") options.singleton = isOldIE();\r\n\r\n\t// By default, add <style> tags to the bottom of <head>.\r\n\tif (typeof options.insertAt === \"undefined\") options.insertAt = \"bottom\";\r\n\r\n\tvar styles = listToStyles(list);\r\n\taddStylesToDom(styles, options);\r\n\r\n\treturn function update(newList) {\r\n\t\tvar mayRemove = [];\r\n\t\tfor(var i = 0; i < styles.length; i++) {\r\n\t\t\tvar item = styles[i];\r\n\t\t\tvar domStyle = stylesInDom[item.id];\r\n\t\t\tdomStyle.refs--;\r\n\t\t\tmayRemove.push(domStyle);\r\n\t\t}\r\n\t\tif(newList) {\r\n\t\t\tvar newStyles = listToStyles(newList);\r\n\t\t\taddStylesToDom(newStyles, options);\r\n\t\t}\r\n\t\tfor(var i = 0; i < mayRemove.length; i++) {\r\n\t\t\tvar domStyle = mayRemove[i];\r\n\t\t\tif(domStyle.refs === 0) {\r\n\t\t\t\tfor(var j = 0; j < domStyle.parts.length; j++)\r\n\t\t\t\t\tdomStyle.parts[j]();\r\n\t\t\t\tdelete stylesInDom[domStyle.id];\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n}\r\n\r\nfunction addStylesToDom(styles, options) {\r\n\tfor(var i = 0; i < styles.length; i++) {\r\n\t\tvar item = styles[i];\r\n\t\tvar domStyle = stylesInDom[item.id];\r\n\t\tif(domStyle) {\r\n\t\t\tdomStyle.refs++;\r\n\t\t\tfor(var j = 0; j < domStyle.parts.length; j++) {\r\n\t\t\t\tdomStyle.parts[j](item.parts[j]);\r\n\t\t\t}\r\n\t\t\tfor(; j < item.parts.length; j++) {\r\n\t\t\t\tdomStyle.parts.push(addStyle(item.parts[j], options));\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tvar parts = [];\r\n\t\t\tfor(var j = 0; j < item.parts.length; j++) {\r\n\t\t\t\tparts.push(addStyle(item.parts[j], options));\r\n\t\t\t}\r\n\t\t\tstylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};\r\n\t\t}\r\n\t}\r\n}\r\n\r\nfunction listToStyles(list) {\r\n\tvar styles = [];\r\n\tvar newStyles = {};\r\n\tfor(var i = 0; i < list.length; i++) {\r\n\t\tvar item = list[i];\r\n\t\tvar id = item[0];\r\n\t\tvar css = item[1];\r\n\t\tvar media = item[2];\r\n\t\tvar sourceMap = item[3];\r\n\t\tvar part = {css: css, media: media, sourceMap: sourceMap};\r\n\t\tif(!newStyles[id])\r\n\t\t\tstyles.push(newStyles[id] = {id: id, parts: [part]});\r\n\t\telse\r\n\t\t\tnewStyles[id].parts.push(part);\r\n\t}\r\n\treturn styles;\r\n}\r\n\r\nfunction insertStyleElement(options, styleElement) {\r\n\tvar head = getHeadElement();\r\n\tvar lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];\r\n\tif (options.insertAt === \"top\") {\r\n\t\tif(!lastStyleElementInsertedAtTop) {\r\n\t\t\thead.insertBefore(styleElement, head.firstChild);\r\n\t\t} else if(lastStyleElementInsertedAtTop.nextSibling) {\r\n\t\t\thead.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);\r\n\t\t} else {\r\n\t\t\thead.appendChild(styleElement);\r\n\t\t}\r\n\t\tstyleElementsInsertedAtTop.push(styleElement);\r\n\t} else if (options.insertAt === \"bottom\") {\r\n\t\thead.appendChild(styleElement);\r\n\t} else {\r\n\t\tthrow new Error(\"Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.\");\r\n\t}\r\n}\r\n\r\nfunction removeStyleElement(styleElement) {\r\n\tstyleElement.parentNode.removeChild(styleElement);\r\n\tvar idx = styleElementsInsertedAtTop.indexOf(styleElement);\r\n\tif(idx >= 0) {\r\n\t\tstyleElementsInsertedAtTop.splice(idx, 1);\r\n\t}\r\n}\r\n\r\nfunction createStyleElement(options) {\r\n\tvar styleElement = document.createElement(\"style\");\r\n\tstyleElement.type = \"text/css\";\r\n\tinsertStyleElement(options, styleElement);\r\n\treturn styleElement;\r\n}\r\n\r\nfunction createLinkElement(options) {\r\n\tvar linkElement = document.createElement(\"link\");\r\n\tlinkElement.rel = \"stylesheet\";\r\n\tinsertStyleElement(options, linkElement);\r\n\treturn linkElement;\r\n}\r\n\r\nfunction addStyle(obj, options) {\r\n\tvar styleElement, update, remove;\r\n\r\n\tif (options.singleton) {\r\n\t\tvar styleIndex = singletonCounter++;\r\n\t\tstyleElement = singletonElement || (singletonElement = createStyleElement(options));\r\n\t\tupdate = applyToSingletonTag.bind(null, styleElement, styleIndex, false);\r\n\t\tremove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);\r\n\t} else if(obj.sourceMap &&\r\n\t\ttypeof URL === \"function\" &&\r\n\t\ttypeof URL.createObjectURL === \"function\" &&\r\n\t\ttypeof URL.revokeObjectURL === \"function\" &&\r\n\t\ttypeof Blob === \"function\" &&\r\n\t\ttypeof btoa === \"function\") {\r\n\t\tstyleElement = createLinkElement(options);\r\n\t\tupdate = updateLink.bind(null, styleElement);\r\n\t\tremove = function() {\r\n\t\t\tremoveStyleElement(styleElement);\r\n\t\t\tif(styleElement.href)\r\n\t\t\t\tURL.revokeObjectURL(styleElement.href);\r\n\t\t};\r\n\t} else {\r\n\t\tstyleElement = createStyleElement(options);\r\n\t\tupdate = applyToTag.bind(null, styleElement);\r\n\t\tremove = function() {\r\n\t\t\tremoveStyleElement(styleElement);\r\n\t\t};\r\n\t}\r\n\r\n\tupdate(obj);\r\n\r\n\treturn function updateStyle(newObj) {\r\n\t\tif(newObj) {\r\n\t\t\tif(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)\r\n\t\t\t\treturn;\r\n\t\t\tupdate(obj = newObj);\r\n\t\t} else {\r\n\t\t\tremove();\r\n\t\t}\r\n\t};\r\n}\r\n\r\nvar replaceText = (function () {\r\n\tvar textStore = [];\r\n\r\n\treturn function (index, replacement) {\r\n\t\ttextStore[index] = replacement;\r\n\t\treturn textStore.filter(Boolean).join('\\n');\r\n\t};\r\n})();\r\n\r\nfunction applyToSingletonTag(styleElement, index, remove, obj) {\r\n\tvar css = remove ? \"\" : obj.css;\r\n\r\n\tif (styleElement.styleSheet) {\r\n\t\tstyleElement.styleSheet.cssText = replaceText(index, css);\r\n\t} else {\r\n\t\tvar cssNode = document.createTextNode(css);\r\n\t\tvar childNodes = styleElement.childNodes;\r\n\t\tif (childNodes[index]) styleElement.removeChild(childNodes[index]);\r\n\t\tif (childNodes.length) {\r\n\t\t\tstyleElement.insertBefore(cssNode, childNodes[index]);\r\n\t\t} else {\r\n\t\t\tstyleElement.appendChild(cssNode);\r\n\t\t}\r\n\t}\r\n}\r\n\r\nfunction applyToTag(styleElement, obj) {\r\n\tvar css = obj.css;\r\n\tvar media = obj.media;\r\n\r\n\tif(media) {\r\n\t\tstyleElement.setAttribute(\"media\", media)\r\n\t}\r\n\r\n\tif(styleElement.styleSheet) {\r\n\t\tstyleElement.styleSheet.cssText = css;\r\n\t} else {\r\n\t\twhile(styleElement.firstChild) {\r\n\t\t\tstyleElement.removeChild(styleElement.firstChild);\r\n\t\t}\r\n\t\tstyleElement.appendChild(document.createTextNode(css));\r\n\t}\r\n}\r\n\r\nfunction updateLink(linkElement, obj) {\r\n\tvar css = obj.css;\r\n\tvar sourceMap = obj.sourceMap;\r\n\r\n\tif(sourceMap) {\r\n\t\t// http://stackoverflow.com/a/26603875\r\n\t\tcss += \"\\n/*# sourceMappingURL=data:application/json;base64,\" + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + \" */\";\r\n\t}\r\n\r\n\tvar blob = new Blob([css], { type: \"text/css\" });\r\n\r\n\tvar oldSrc = linkElement.href;\r\n\r\n\tlinkElement.href = URL.createObjectURL(blob);\r\n\r\n\tif(oldSrc)\r\n\t\tURL.revokeObjectURL(oldSrc);\r\n}\r\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/style-loader/addStyles.js\n ** module id = 7\n ** module chunks = 0 1\n **/"],"sourceRoot":""}


--------------------------------------------------------------------------------
/dist/react-crop.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactCrop=e(require("react")):t.ReactCrop=e(t.react)}(this,function(t){return function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="/",e(0)}([function(t,e,i){"use strict";function s(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var n=i(1),o=s(n),r=i(2),a=s(r),h=i(3),l=s(h);i(4),e["default"]=o["default"].createClass({displayName:"Cropper",propTypes:{width:o["default"].PropTypes.number.isRequired,height:o["default"].PropTypes.number.isRequired,center:o["default"].PropTypes.bool,image:o["default"].PropTypes.any,widthLabel:o["default"].PropTypes.string,heightLabel:o["default"].PropTypes.string,offsetXLabel:o["default"].PropTypes.string,offsetYLabel:o["default"].PropTypes.string,onImageLoaded:o["default"].PropTypes.func,minConstraints:o["default"].PropTypes.arrayOf(o["default"].PropTypes.number)},getDefaultProps:function(){return{center:!1,width:"Width",height:"Height",offsetXLabel:"Offset X",offsetYLabel:"Offset Y"}},getInitialState:function(){return{imageLoaded:!1,width:this.props.width,height:this.props.height,url:window.URL.createObjectURL(this.props.image)}},componentWillReceiveProps:function(t){this.props.image!==t.image&&this.setState({url:window.URL.createObjectURL(t.image),imageLoaded:!1})},shouldComponentUpdate:function(t,e){var i=this.props.image;return t.image.size!==i.size||t.image.name!==i.name||t.image.type!==i.type||e.imageLoaded!==this.state.imageLoaded},onLoad:function(t){var e=this,i=this.refs.box.getBoundingClientRect();this.setState({imageLoaded:!0,width:i.width,height:i.height},function(){var t=e.refs.image;e.props.onImageLoaded&&e.props.onImageLoaded(t)})},cropImage:function(){var t=this;return new Promise(function(e,i){var s=new Image;s.onload=function(){var i=t.refs.canvas,s=t.refs.image,n=i.getContext("2d"),o=s.naturalWidth/t.state.width,r=s.naturalHeight/t.state.height,a=1>o?0:t.state.offset.left*o,h=1>r?0:t.state.offset.top*r,p=1>o?s.naturalWidth:t.state.dimensions.width*o,u=1>r?s.naturalHeight:t.state.dimensions.height*r,d=1>o?Math.floor((t.state.dimensions.width-s.naturalWidth)/2):0,c=1>r?Math.floor((t.state.dimensions.height-s.naturalHeight)/2):0,f=1>o?s.naturalWidth:t.props.width,g=1>r?s.naturalHeight:t.props.height;n.clearRect(0,0,t.props.width,t.props.height),n.drawImage(s,a,h,p,u,d,c,f,g),e(l["default"](i.toDataURL()))},s.src=window.URL.createObjectURL(t.props.image)})},onChange:function(t,e){this.setState({offset:t,dimensions:e})},render:function(){return o["default"].createElement("div",{ref:"box",className:"Cropper",style:{minWidth:this.props.width,minHeight:this.props.height}},o["default"].createElement("canvas",{className:"Cropper-canvas",ref:"canvas",width:this.props.width,height:this.props.height}),o["default"].createElement("img",{ref:"image",src:this.state.url,className:"Cropper-image",onLoad:this.onLoad,style:{top:this.state.height/2}}),this.state.imageLoaded&&o["default"].createElement("div",{className:"box"},o["default"].createElement(a["default"],{aspectRatio:this.props.width/this.props.height,width:this.state.width,height:this.state.height,minConstraints:this.props.minConstraints,onChange:this.onChange,widthLabel:this.props.widthLabel,heightLabel:this.props.heightLabel,offsetXLabel:this.props.offsetXLabel,offsetYLabel:this.props.offsetYLabel},o["default"].createElement("div",{className:"Cropper-box"}))))}})},function(e,i){e.exports=t},function(t,e,i){"use strict";function s(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t},o=function(){function t(t,e){var i=[],s=!0,n=!1,o=void 0;try{for(var r,a=t[Symbol.iterator]();!(s=(r=a.next()).done)&&(i.push(r.value),!e||i.length!==e);s=!0);}catch(h){n=!0,o=h}finally{try{!s&&a["return"]&&a["return"]()}finally{if(n)throw o}}return i}return function(e,i){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r=i(1),a=s(r);e["default"]=a["default"].createClass({displayName:"DraggableResizableBox",propTypes:{aspectRatio:a["default"].PropTypes.number.isRequired,width:a["default"].PropTypes.number.isRequired,height:a["default"].PropTypes.number.isRequired,onChange:a["default"].PropTypes.func,offset:a["default"].PropTypes.array,minConstraints:a["default"].PropTypes.array,children:a["default"].PropTypes.node,widthLabel:a["default"].PropTypes.string,heightLabel:a["default"].PropTypes.string,offsetXLabel:a["default"].PropTypes.string,offsetYLabel:a["default"].PropTypes.string},getDefaultProps:function(){return{widthLabel:"Width",heightLabel:"Height",offsetXLabel:"Offset X",offsetYLabel:"Offset Y"}},getInitialState:function(){var t=this.preserveAspectRatio(this.props.width,this.props.height),e=o(t,2),i=e[0],s=e[1],n=(this.props.height-s)/2,r=(this.props.width-i)/2;return{top:n,left:r,bottom:n,right:r,width:i,height:s}},componentDidMount:function(){document.addEventListener("mousemove",this.eventMove),document.addEventListener("mouseup",this.eventEnd),document.addEventListener("touchmove",this.eventMove),document.addEventListener("touchend",this.eventEnd),document.addEventListener("keydown",this.handleKey),this.props.onChange({top:this.state.top,left:this.state.left},{width:this.state.width,height:this.state.height})},componentWillUnmount:function(){document.removeEventListener("mousemove",this.eventMove),document.removeEventListener("mouseup",this.eventEnd),document.removeEventListener("touchmove",this.eventMove),document.removeEventListener("touchend",this.eventEnd),document.removeEventListener("keydown",this.handleKey)},calculateDimensions:function(t){var e=t.top,i=t.left,s=t.bottom,n=t.right;return{width:this.props.width-i-n,height:this.props.height-e-s}},preserveAspectRatio:function(t,e){this.props.minConstraints&&(t=Math.max(t,this.props.minConstraints[0]),e=Math.max(e,this.props.minConstraints[1]));var i=t/e;return i<this.props.aspectRatio?[t,t/this.props.aspectRatio]:i>this.props.aspectRatio?[e*this.props.aspectRatio,e]:[t,e]},constrainBoundary:function(t){return 0>t?0:t},getClientCoordinates:function(t){return t.touches?{clientX:t.touches[0].clientX,clientY:t.touches[0].clientY}:{clientX:t.clientX,clientY:t.clientY}},eventMove:function(t){this.state.resizing?this.onResize(t):this.state.moving&&this.eventMoveBox(t)},eventEnd:function(t){this.state.resizing?this.stopResize(t):this.state.moving&&this.stopMove(t)},startResize:function(t,e){e.stopPropagation(),e.preventDefault(),this.setState({resizing:!0,corner:t})},stopResize:function(){this.setState({resizing:!1})},nw:function(t,e){var i=n({},this.state,{top:this.constrainBoundary(t.clientY-e.top),left:this.constrainBoundary(t.clientX-e.left)}),s=this.calculateDimensions(i),r=this.preserveAspectRatio(s.width,s.height),a=o(r,2),h=a[0],l=a[1];return i.top=this.props.height-i.bottom-l,i.left=this.props.width-i.right-h,i},ne:function(t,e){var i=n({},this.state,{top:this.constrainBoundary(t.clientY-e.top),right:this.constrainBoundary(e.right-t.clientX)}),s=this.calculateDimensions(i),r=this.preserveAspectRatio(s.width,s.height),a=o(r,2),h=a[0],l=a[1];return i.top=this.props.height-i.bottom-l,i.right=this.props.width-i.left-h,i},se:function(t,e){var i=n({},this.state,{bottom:this.constrainBoundary(e.bottom-t.clientY),right:this.constrainBoundary(e.right-t.clientX)}),s=this.calculateDimensions(i),r=this.preserveAspectRatio(s.width,s.height),a=o(r,2),h=a[0],l=a[1];return i.bottom=this.props.height-i.top-l,i.right=this.props.width-i.left-h,i},sw:function(t,e){var i=n({},this.state,{bottom:this.constrainBoundary(e.bottom-t.clientY),left:this.constrainBoundary(t.clientX-e.left)}),s=this.calculateDimensions(i),r=this.preserveAspectRatio(s.width,s.height),a=o(r,2),h=a[0],l=a[1];return i.bottom=this.props.height-i.top-l,i.left=this.props.width-i.right-h,i},onResize:function(t){var e=this.refs.box.parentElement.parentElement.getBoundingClientRect(),i=this.getClientCoordinates(t),s=this[this.state.corner](i,e);this.resize(s,i)},controlsResize:function(t){var e=this.refs.box.parentElement.parentElement.getBoundingClientRect(),i="width"===t.target.name?+t.target.value:+t.target.value*this.props.aspectRatio,s="height"===t.target.name?+t.target.value:+t.target.value/this.props.aspectRatio,o=this.preserveAspectRatio(i,s);if(i=o[0],s=o[1],!(i>e.width-this.state.left||s>e.height-this.state.top)){var r=this.state.width-i,a=this.state.height-s,h=n({},this.state,{right:this.state.right+r,bottom:this.state.bottom+a}),l={clientX:e.right-h.right,clientY:e.bottom-h.bottom};this.resize(h,l)}},resize:function(t,e){var i=this,s=this.calculateDimensions(t),o=s.width!==this.state.width,r=s.height!==this.state.height;(o||r)&&this.setState(n({},e,t,s),function(){i.props.onChange({top:t.top,left:t.left},s)})},startMove:function(t){var e=this.getClientCoordinates(t),i=e.clientX,s=e.clientY;this.setState({moving:!0,clientX:i,clientY:s})},stopMove:function(t){this.setState({moving:!1})},eventMoveBox:function(t){t.preventDefault();var e=this.getClientCoordinates(t),i=e.clientX,s=e.clientY,n=i-this.state.clientX,o=s-this.state.clientY;this.moveBox(i,s,n,o)},controlsMoveBox:function(t){var e="x"===t.target.name?t.target.value-this.state.left:0,i="y"===t.target.name?t.target.value-this.state.top:0;this.moveBox(0,0,e,i)},moveBox:function(t,e,i,s){var o=this,r={top:this.constrainBoundary(this.state.top+s),left:this.constrainBoundary(this.state.left+i),bottom:this.constrainBoundary(this.state.bottom-s),right:this.constrainBoundary(this.state.right-i)};r.top||(r.bottom=this.props.height-this.state.height),r.bottom||(r.top=this.props.height-this.state.height),r.left||(r.right=this.props.width-this.state.width),r.right||(r.left=this.props.width-this.state.width),this.setState(n({},{clientX:t,clientY:e},r),function(){o.props.onChange({top:r.top,left:r.left},o.calculateDimensions(r))})},keyboardResize:function(t){if(!(this.state.right-t<0||this.state.bottom-t<0)){var e=this.preserveAspectRatio(this.state.width+t,this.state.height+t),i=o(e,2),s=i[0],n=i[1],r=s-this.state.width,a=n-this.state.height;this.setState({bottom:this.state.bottom-a,right:this.state.right-r,width:s,height:n})}},handleKey:function(t){t.shiftKey?"ArrowUp"===t.key||38===t.keyCode?(this.keyboardResize(-10),t.preventDefault()):"ArrowDown"===t.key||40===t.keyCode?(this.keyboardResize(10),t.preventDefault()):"ArrowLeft"===t.key||37===t.keyCode?(this.keyboardResize(-10),t.preventDefault()):("ArrowRight"===t.key||39===t.keyCode)&&(this.keyboardResize(10),t.preventDefault()):"ArrowUp"===t.key||38===t.keyCode?(this.moveBox(this.state.clientX,this.state.clientY,0,-10),t.preventDefault()):"ArrowDown"===t.key||40===t.keyCode?(this.moveBox(this.state.clientX,this.state.clientY,0,10),t.preventDefault()):"ArrowLeft"===t.key||37===t.keyCode?(this.moveBox(this.state.clientX,this.state.clientY,-10,0),t.preventDefault()):("ArrowRight"===t.key||39===t.keyCode)&&(this.moveBox(this.state.clientX,this.state.clientY,10,0),t.preventDefault())},render:function(){var t={position:"absolute",top:this.state.top,left:this.state.left,right:this.state.right,bottom:this.state.bottom},e=this.calculateDimensions(this.state),i=e.width,s=e.height,n={height:this.state.top},o={height:this.state.bottom},r={top:this.state.top,right:i+this.state.right,bottom:this.state.bottom},h={top:this.state.top,left:i+this.state.left,bottom:this.state.bottom};return a["default"].createElement("div",{ref:"box",className:"DraggableResizable"},a["default"].createElement("div",{className:"DraggableResizable-controls"},a["default"].createElement("label",null,this.props.offsetXLabel,a["default"].createElement("input",{name:"x",value:Math.round(this.state.left),onChange:this.controlsMoveBox,tabIndex:"-1",type:"number"})),a["default"].createElement("label",null,this.props.offsetYLabel,a["default"].createElement("input",{name:"y",value:Math.round(this.state.top),onChange:this.controlsMoveBox,tabIndex:"-1",type:"number"})),a["default"].createElement("label",null,this.props.widthLabel,a["default"].createElement("input",{name:"width",value:Math.round(i),type:"number",tabIndex:"-1",onChange:this.controlsResize})),a["default"].createElement("label",null,this.props.heightLabel,a["default"].createElement("input",{value:Math.round(s),type:"number",name:"height",tabIndex:"-1",onChange:this.controlsResize}))),a["default"].createElement("div",{className:"DraggableResizable-top",style:n}),a["default"].createElement("div",{className:"DraggableResizable-left",style:r}),a["default"].createElement("div",{style:t,onMouseDown:this.startMove,onTouchStart:this.startMove},this.props.children,a["default"].createElement("div",{className:"resize-handle resize-handle-se",onMouseDown:this.startResize.bind(null,"se"),onTouchStart:this.startResize.bind(null,"se")}),a["default"].createElement("div",{className:"resize-handle resize-handle-ne",onMouseDown:this.startResize.bind(null,"ne"),onTouchStart:this.startResize.bind(null,"ne")}),a["default"].createElement("div",{className:"resize-handle resize-handle-sw",onMouseDown:this.startResize.bind(null,"sw"),onTouchStart:this.startResize.bind(null,"sw")}),a["default"].createElement("div",{className:"resize-handle resize-handle-nw",onMouseDown:this.startResize.bind(null,"nw"),onTouchStart:this.startResize.bind(null,"nw")})),a["default"].createElement("div",{className:"DraggableResizable-right",style:h}),a["default"].createElement("div",{className:"DraggableResizable-bottom",style:o}))}})},function(t,e){function i(t){return t.split(";")[0].slice(5)}var s=window.Blob,n=100==new s([new Uint8Array(100)]).size;t.exports=function(t){for(var e=t.split(",")[1],o=atob(e),r=new ArrayBuffer(o.length),a=new Uint8Array(r),h=0;h<o.length;h++)a[h]=o.charCodeAt(h);n||(a=r);var l=new s([a],{type:i(t)});return l.slice=l.slice||l.webkitSlice,l}},function(t,e,i){var s=i(5);"string"==typeof s&&(s=[[t.id,s,""]]);i(7)(s,{});s.locals&&(t.exports=s.locals)},function(t,e,i){e=t.exports=i(6)(),e.push([t.id,".Cropper{position:relative;display:inline-block;max-width:100%;max-height:100%}.box,.Cropper-box{position:absolute;top:0;left:0;bottom:0;right:0}.Cropper-box{cursor:move;border:1px solid #fff}.Cropper-canvas{visibility:hidden;position:absolute}.Cropper-image{vertical-align:middle;max-width:100%;position:relative;transform:translate(-50%,-50%);left:50%}.resize-handle{position:absolute;background-color:#eceeef;border:1px solid #8295ab;width:13px;height:13px;z-index:1}.resize-handle-se{bottom:0;right:0;cursor:nwse-resize;transform:translate(50%,50%)}.resize-handle-ne{right:0;top:0;cursor:nesw-resize;transform:translate(50%,-50%)}.resize-handle-sw{bottom:0;left:0;cursor:nesw-resize;transform:translate(-50%,50%)}.resize-handle-nw{top:0;bottom:0;cursor:nwse-resize;transform:translate(-50%,-50%)}.DraggableResizable{position:relative;width:100%;height:100%}.DraggableResizable-controls{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DraggableResizable-bottom,.DraggableResizable-left,.DraggableResizable-right,.DraggableResizable-top{position:absolute;background-color:rgba(0,0,0,.7)}.DraggableResizable-top{top:0;left:0;right:0}.DraggableResizable-bottom{bottom:0;left:0;right:0}.DraggableResizable-left{left:0}.DraggableResizable-right{right:0}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var s={},n=0;n<this.length;n++){var o=this[n][0];"number"==typeof o&&(s[o]=!0)}for(n=0;n<e.length;n++){var r=e[n];"number"==typeof r[0]&&s[r[0]]||(i&&!r[2]?r[2]=i:i&&(r[2]="("+r[2]+") and ("+i+")"),t.push(r))}},t}},function(t,e,i){function s(t,e){for(var i=0;i<t.length;i++){var s=t[i],n=c[s.id];if(n){n.refs++;for(var o=0;o<n.parts.length;o++)n.parts[o](s.parts[o]);for(;o<s.parts.length;o++)n.parts.push(l(s.parts[o],e))}else{for(var r=[],o=0;o<s.parts.length;o++)r.push(l(s.parts[o],e));c[s.id]={id:s.id,refs:1,parts:r}}}}function n(t){for(var e=[],i={},s=0;s<t.length;s++){var n=t[s],o=n[0],r=n[1],a=n[2],h=n[3],l={css:r,media:a,sourceMap:h};i[o]?i[o].parts.push(l):e.push(i[o]={id:o,parts:[l]})}return e}function o(t,e){var i=m(),s=y[y.length-1];if("top"===t.insertAt)s?s.nextSibling?i.insertBefore(e,s.nextSibling):i.appendChild(e):i.insertBefore(e,i.firstChild),y.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");i.appendChild(e)}}function r(t){t.parentNode.removeChild(t);var e=y.indexOf(t);e>=0&&y.splice(e,1)}function a(t){var e=document.createElement("style");return e.type="text/css",o(t,e),e}function h(t){var e=document.createElement("link");return e.rel="stylesheet",o(t,e),e}function l(t,e){var i,s,n;if(e.singleton){var o=b++;i=v||(v=a(e)),s=p.bind(null,i,o,!1),n=p.bind(null,i,o,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=h(e),s=d.bind(null,i),n=function(){r(i),i.href&&URL.revokeObjectURL(i.href)}):(i=a(e),s=u.bind(null,i),n=function(){r(i)});return s(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;s(t=e)}else n()}}function p(t,e,i,s){var n=i?"":s.css;if(t.styleSheet)t.styleSheet.cssText=w(e,n);else{var o=document.createTextNode(n),r=t.childNodes;r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(o,r[e]):t.appendChild(o)}}function u(t,e){var i=e.css,s=e.media;if(s&&t.setAttribute("media",s),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}function d(t,e){var i=e.css,s=e.sourceMap;s&&(i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */");var n=new Blob([i],{type:"text/css"}),o=t.href;t.href=URL.createObjectURL(n),o&&URL.revokeObjectURL(o)}var c={},f=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},g=f(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),m=f(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,b=0,y=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=g()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var i=n(t);return s(i,e),function(t){for(var o=[],r=0;r<i.length;r++){var a=i[r],h=c[a.id];h.refs--,o.push(h)}if(t){var l=n(t);s(l,e)}for(var r=0;r<o.length;r++){var h=o[r];if(0===h.refs){for(var p=0;p<h.parts.length;p++)h.parts[p]();delete c[h.id]}}}};var w=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()}])});
2 | //# sourceMappingURL=react-crop.min.js.map


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>react-crop example</title>
 5 |     <style >
 6 |       .Wrapper {
 7 |         max-width: 400px;
 8 |         max-height: 300px;
 9 |         margin: 1em;
10 |         overflow:hidden;
11 |       }
12 |       </style>
13 |   </head>
14 |   <body>
15 |     <div id='view'></div>
16 |     <script src='./bundle.js'></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/docs/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Cropper from '../lib/index.src.js'
 4 | 
 5 | const WIDTH = 262;
 6 | const HEIGHT = 147;
 7 | 
 8 | let Wrapper = React.createClass({
 9 |   displayName: 'Wrapper',
10 | 
11 |   getInitialState () {
12 |     return {
13 |       image: null,
14 |       previewUrl: null
15 |     }
16 |   },
17 | 
18 |   onChange (evt) {
19 |     this.setState({
20 |       image: evt.target.files[0]
21 |     })
22 |   },
23 | 
24 |   crop () {
25 |     this.refs.crop.cropImage().then((image) => {
26 |       this.setState({
27 |         previewUrl: window.URL.createObjectURL(image)
28 |       })
29 |     })
30 |   },
31 | 
32 |   clear () {
33 |     this.refs.file.value = null
34 |     this.setState({
35 |       previewUrl: null,
36 |       image: null
37 |     })
38 |   },
39 | 
40 |   imageLoaded (img) {
41 |     if (img.naturalWidth && img.naturalWidth < WIDTH &&
42 |         img.naturalHeight && img.naturalHeight < HEIGHT) {
43 |       this.crop()
44 |     }
45 |   },
46 | 
47 |   render () {
48 |     return (
49 |       <div>
50 |         <input ref='file' type='file' onChange={this.onChange}/>
51 |         <div className='Wrapper'>
52 |           {this.state.image &&
53 |             <div>
54 |               <Cropper
55 |                 ref='crop'
56 |                 image={this.state.image}
57 |                 width={WIDTH}
58 |                 height={HEIGHT}
59 |                 onImageLoaded={this.imageLoaded} />
60 |             </div>}
61 |         </div>
62 |         <div>
63 |           <button onClick={this.crop}>Crop</button>
64 |           <button onClick={this.clear}>Clear</button>
65 |         </div>
66 |           {this.state.previewUrl &&
67 |             <img src={this.state.previewUrl} />}
68 |       </div>
69 |     )
70 |   }
71 | })
72 | 
73 | ReactDOM.render(<Wrapper />, document.querySelector('#view'))
74 | 


--------------------------------------------------------------------------------
/draggable-resizable-box.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true
  5 | });
  6 | 
  7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  8 | 
  9 | var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 10 | 
 11 | var _react = require('react');
 12 | 
 13 | var _react2 = _interopRequireDefault(_react);
 14 | 
 15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 16 | 
 17 | exports.default = _react2.default.createClass({
 18 |   displayName: 'DraggableResizableBox',
 19 | 
 20 |   propTypes: {
 21 |     aspectRatio: _react2.default.PropTypes.number.isRequired,
 22 |     width: _react2.default.PropTypes.number.isRequired,
 23 |     height: _react2.default.PropTypes.number.isRequired,
 24 |     onChange: _react2.default.PropTypes.func,
 25 |     offset: _react2.default.PropTypes.array,
 26 |     minConstraints: _react2.default.PropTypes.array,
 27 |     children: _react2.default.PropTypes.node,
 28 |     widthLabel: _react2.default.PropTypes.string,
 29 |     heightLabel: _react2.default.PropTypes.string,
 30 |     offsetXLabel: _react2.default.PropTypes.string,
 31 |     offsetYLabel: _react2.default.PropTypes.string
 32 |   },
 33 | 
 34 |   getDefaultProps: function getDefaultProps() {
 35 |     return {
 36 |       widthLabel: 'Width',
 37 |       heightLabel: 'Height',
 38 |       offsetXLabel: 'Offset X',
 39 |       offsetYLabel: 'Offset Y'
 40 |     };
 41 |   },
 42 |   getInitialState: function getInitialState() {
 43 |     var _preserveAspectRatio = this.preserveAspectRatio(this.props.width, this.props.height),
 44 |         _preserveAspectRatio2 = _slicedToArray(_preserveAspectRatio, 2),
 45 |         width = _preserveAspectRatio2[0],
 46 |         height = _preserveAspectRatio2[1];
 47 | 
 48 |     var centerYOffset = (this.props.height - height) / 2;
 49 |     var centerXOffset = (this.props.width - width) / 2;
 50 |     return {
 51 |       top: centerYOffset,
 52 |       left: centerXOffset,
 53 |       bottom: centerYOffset,
 54 |       right: centerXOffset,
 55 |       width: width,
 56 |       height: height
 57 |     };
 58 |   },
 59 |   componentDidMount: function componentDidMount() {
 60 |     document.addEventListener('mousemove', this.eventMove);
 61 |     document.addEventListener('mouseup', this.eventEnd);
 62 |     document.addEventListener('touchmove', this.eventMove);
 63 |     document.addEventListener('touchend', this.eventEnd);
 64 |     document.addEventListener('keydown', this.handleKey);
 65 |     this.props.onChange({
 66 |       top: this.state.top,
 67 |       left: this.state.left
 68 |     }, {
 69 |       width: this.state.width,
 70 |       height: this.state.height
 71 |     });
 72 |   },
 73 |   componentWillUnmount: function componentWillUnmount() {
 74 |     document.removeEventListener('mousemove', this.eventMove);
 75 |     document.removeEventListener('mouseup', this.eventEnd);
 76 |     document.removeEventListener('touchmove', this.eventMove);
 77 |     document.removeEventListener('touchend', this.eventEnd);
 78 |     document.removeEventListener('keydown', this.handleKey);
 79 |   },
 80 |   calculateDimensions: function calculateDimensions(_ref) {
 81 |     var top = _ref.top,
 82 |         left = _ref.left,
 83 |         bottom = _ref.bottom,
 84 |         right = _ref.right;
 85 | 
 86 |     return { width: this.props.width - left - right, height: this.props.height - top - bottom };
 87 |   },
 88 | 
 89 | 
 90 |   // If you do this, be careful of constraints
 91 |   preserveAspectRatio: function preserveAspectRatio(width, height) {
 92 |     if (this.props.minConstraints) {
 93 |       width = Math.max(width, this.props.minConstraints[0]);
 94 |       height = Math.max(height, this.props.minConstraints[1]);
 95 |     }
 96 |     var currentAspectRatio = width / height;
 97 | 
 98 |     if (currentAspectRatio < this.props.aspectRatio) {
 99 |       return [width, width / this.props.aspectRatio];
100 |     } else if (currentAspectRatio > this.props.aspectRatio) {
101 |       return [height * this.props.aspectRatio, height];
102 |     } else {
103 |       return [width, height];
104 |     }
105 |   },
106 |   constrainBoundary: function constrainBoundary(side) {
107 |     return side < 0 ? 0 : side;
108 |   },
109 |   getClientCoordinates: function getClientCoordinates(evt) {
110 |     return evt.touches ? {
111 |       clientX: evt.touches[0].clientX,
112 |       clientY: evt.touches[0].clientY
113 |     } : {
114 |       clientX: evt.clientX,
115 |       clientY: evt.clientY
116 |     };
117 |   },
118 |   eventMove: function eventMove(evt) {
119 |     if (this.state.resizing) {
120 |       this.onResize(evt);
121 |     } else if (this.state.moving) {
122 |       this.eventMoveBox(evt);
123 |     }
124 |   },
125 |   eventEnd: function eventEnd(evt) {
126 |     if (this.state.resizing) {
127 |       this.stopResize(evt);
128 |     } else if (this.state.moving) {
129 |       this.stopMove(evt);
130 |     }
131 |   },
132 | 
133 | 
134 |   // Resize methods
135 |   startResize: function startResize(corner, event) {
136 |     event.stopPropagation();
137 |     event.preventDefault();
138 |     this.setState({
139 |       resizing: true,
140 |       corner: corner
141 |     });
142 |   },
143 |   stopResize: function stopResize() {
144 |     this.setState({ resizing: false });
145 |   },
146 | 
147 | 
148 |   // resize strategies
149 |   nw: function nw(mousePos, boxPos) {
150 |     var pos = _extends({}, this.state, {
151 |       top: this.constrainBoundary(mousePos.clientY - boxPos.top),
152 |       left: this.constrainBoundary(mousePos.clientX - boxPos.left)
153 |     });
154 |     var dimensions = this.calculateDimensions(pos);
155 | 
156 |     var _preserveAspectRatio3 = this.preserveAspectRatio(dimensions.width, dimensions.height),
157 |         _preserveAspectRatio4 = _slicedToArray(_preserveAspectRatio3, 2),
158 |         width = _preserveAspectRatio4[0],
159 |         height = _preserveAspectRatio4[1];
160 | 
161 |     pos.top = this.props.height - pos.bottom - height;
162 |     pos.left = this.props.width - pos.right - width;
163 |     return pos;
164 |   },
165 |   ne: function ne(mousePos, boxPos) {
166 |     var pos = _extends({}, this.state, {
167 |       top: this.constrainBoundary(mousePos.clientY - boxPos.top),
168 |       right: this.constrainBoundary(boxPos.right - mousePos.clientX)
169 |     });
170 |     var dimensions = this.calculateDimensions(pos);
171 | 
172 |     var _preserveAspectRatio5 = this.preserveAspectRatio(dimensions.width, dimensions.height),
173 |         _preserveAspectRatio6 = _slicedToArray(_preserveAspectRatio5, 2),
174 |         width = _preserveAspectRatio6[0],
175 |         height = _preserveAspectRatio6[1];
176 | 
177 |     pos.top = this.props.height - pos.bottom - height;
178 |     pos.right = this.props.width - pos.left - width;
179 |     return pos;
180 |   },
181 |   se: function se(mousePos, boxPos) {
182 |     var pos = _extends({}, this.state, {
183 |       bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),
184 |       right: this.constrainBoundary(boxPos.right - mousePos.clientX)
185 |     });
186 |     var dimensions = this.calculateDimensions(pos);
187 | 
188 |     var _preserveAspectRatio7 = this.preserveAspectRatio(dimensions.width, dimensions.height),
189 |         _preserveAspectRatio8 = _slicedToArray(_preserveAspectRatio7, 2),
190 |         width = _preserveAspectRatio8[0],
191 |         height = _preserveAspectRatio8[1];
192 | 
193 |     pos.bottom = this.props.height - pos.top - height;
194 |     pos.right = this.props.width - pos.left - width;
195 |     return pos;
196 |   },
197 |   sw: function sw(mousePos, boxPos) {
198 |     var pos = _extends({}, this.state, {
199 |       bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),
200 |       left: this.constrainBoundary(mousePos.clientX - boxPos.left)
201 |     });
202 |     var dimensions = this.calculateDimensions(pos);
203 | 
204 |     var _preserveAspectRatio9 = this.preserveAspectRatio(dimensions.width, dimensions.height),
205 |         _preserveAspectRatio10 = _slicedToArray(_preserveAspectRatio9, 2),
206 |         width = _preserveAspectRatio10[0],
207 |         height = _preserveAspectRatio10[1];
208 | 
209 |     pos.bottom = this.props.height - pos.top - height;
210 |     pos.left = this.props.width - pos.right - width;
211 |     return pos;
212 |   },
213 |   onResize: function onResize(event) {
214 |     var box = this.refs.box.parentElement.parentElement.getBoundingClientRect();
215 |     var coordinates = this.getClientCoordinates(event);
216 |     var position = this[this.state.corner](coordinates, box);
217 |     this.resize(position, coordinates);
218 |   },
219 |   controlsResize: function controlsResize(event) {
220 |     var box = this.refs.box.parentElement.parentElement.getBoundingClientRect();
221 |     var width = event.target.name === 'width' ? +event.target.value : +event.target.value * this.props.aspectRatio;
222 |     var height = event.target.name === 'height' ? +event.target.value : +event.target.value / this.props.aspectRatio;
223 |     var dimensions = this.preserveAspectRatio(width, height);
224 |     width = dimensions[0];
225 |     height = dimensions[1];
226 | 
227 |     if (width > box.width - this.state.left || height > box.height - this.state.top) return;
228 | 
229 |     var widthDifference = this.state.width - width;
230 |     var heightDifference = this.state.height - height;
231 |     var pos = _extends({}, this.state, {
232 |       right: this.state.right + widthDifference,
233 |       bottom: this.state.bottom + heightDifference
234 |     });
235 |     var coordinates = {
236 |       clientX: box.right - pos.right,
237 |       clientY: box.bottom - pos.bottom
238 |     };
239 | 
240 |     this.resize(pos, coordinates);
241 |   },
242 |   resize: function resize(position, coordinates) {
243 |     var _this = this;
244 | 
245 |     var dimensions = this.calculateDimensions(position);
246 |     var widthChanged = dimensions.width !== this.state.width,
247 |         heightChanged = dimensions.height !== this.state.height;
248 |     if (!widthChanged && !heightChanged) return;
249 | 
250 |     this.setState(_extends({}, coordinates, position, dimensions), function () {
251 |       _this.props.onChange({
252 |         top: position.top,
253 |         left: position.left
254 |       }, dimensions);
255 |     });
256 |   },
257 | 
258 | 
259 |   // Move methods
260 |   startMove: function startMove(evt) {
261 |     var _getClientCoordinates = this.getClientCoordinates(evt),
262 |         clientX = _getClientCoordinates.clientX,
263 |         clientY = _getClientCoordinates.clientY;
264 | 
265 |     this.setState({
266 |       moving: true,
267 |       clientX: clientX,
268 |       clientY: clientY
269 |     });
270 |   },
271 |   stopMove: function stopMove(evt) {
272 |     this.setState({
273 |       moving: false
274 |     });
275 |   },
276 |   eventMoveBox: function eventMoveBox(evt) {
277 |     evt.preventDefault();
278 | 
279 |     var _getClientCoordinates2 = this.getClientCoordinates(evt),
280 |         clientX = _getClientCoordinates2.clientX,
281 |         clientY = _getClientCoordinates2.clientY;
282 | 
283 |     var movedX = clientX - this.state.clientX;
284 |     var movedY = clientY - this.state.clientY;
285 | 
286 |     this.moveBox(clientX, clientY, movedX, movedY);
287 |   },
288 |   controlsMoveBox: function controlsMoveBox(evt) {
289 |     var movedX = evt.target.name === 'x' ? evt.target.value - this.state.left : 0;
290 |     var movedY = evt.target.name === 'y' ? evt.target.value - this.state.top : 0;
291 |     this.moveBox(0, 0, movedX, movedY);
292 |   },
293 |   moveBox: function moveBox(clientX, clientY, movedX, movedY) {
294 |     var _this2 = this;
295 | 
296 |     var position = {
297 |       top: this.constrainBoundary(this.state.top + movedY),
298 |       left: this.constrainBoundary(this.state.left + movedX),
299 |       bottom: this.constrainBoundary(this.state.bottom - movedY),
300 |       right: this.constrainBoundary(this.state.right - movedX)
301 |     };
302 | 
303 |     if (!position.top) {
304 |       position.bottom = this.props.height - this.state.height;
305 |     }
306 |     if (!position.bottom) {
307 |       position.top = this.props.height - this.state.height;
308 |     }
309 |     if (!position.left) {
310 |       position.right = this.props.width - this.state.width;
311 |     }
312 |     if (!position.right) {
313 |       position.left = this.props.width - this.state.width;
314 |     }
315 | 
316 |     this.setState(_extends({}, {
317 |       clientX: clientX,
318 |       clientY: clientY
319 |     }, position), function () {
320 |       _this2.props.onChange({
321 |         top: position.top,
322 |         left: position.left
323 |       }, _this2.calculateDimensions(position));
324 |     });
325 |   },
326 |   keyboardResize: function keyboardResize(change) {
327 |     if (this.state.right - change < 0) {
328 |       return;
329 |     }
330 |     if (this.state.bottom - change < 0) {
331 |       return;
332 |     }
333 | 
334 |     var _preserveAspectRatio11 = this.preserveAspectRatio(this.state.width + change, this.state.height + change),
335 |         _preserveAspectRatio12 = _slicedToArray(_preserveAspectRatio11, 2),
336 |         width = _preserveAspectRatio12[0],
337 |         height = _preserveAspectRatio12[1];
338 | 
339 |     var widthChange = width - this.state.width;
340 |     var heightChange = height - this.state.height;
341 | 
342 |     this.setState({
343 |       bottom: this.state.bottom - heightChange,
344 |       right: this.state.right - widthChange,
345 |       width: width,
346 |       height: height
347 |     });
348 |   },
349 |   handleKey: function handleKey(event) {
350 |     // safari doesn't support event.key, so fall back to keyCode
351 |     if (event.shiftKey) {
352 |       if (event.key === 'ArrowUp' || event.keyCode === 38) {
353 |         this.keyboardResize(-10);
354 |         event.preventDefault();
355 |       } else if (event.key === 'ArrowDown' || event.keyCode === 40) {
356 |         this.keyboardResize(10);
357 |         event.preventDefault();
358 |       } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {
359 |         this.keyboardResize(-10);
360 |         event.preventDefault();
361 |       } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
362 |         this.keyboardResize(10);
363 |         event.preventDefault();
364 |       }
365 |     } else {
366 |       if (event.key === 'ArrowUp' || event.keyCode === 38) {
367 |         this.moveBox(this.state.clientX, this.state.clientY, 0, -10);
368 |         event.preventDefault();
369 |       } else if (event.key === 'ArrowDown' || event.keyCode === 40) {
370 |         this.moveBox(this.state.clientX, this.state.clientY, 0, 10);
371 |         event.preventDefault();
372 |       } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {
373 |         this.moveBox(this.state.clientX, this.state.clientY, -10, 0);
374 |         event.preventDefault();
375 |       } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
376 |         this.moveBox(this.state.clientX, this.state.clientY, 10, 0);
377 |         event.preventDefault();
378 |       }
379 |     }
380 |   },
381 |   render: function render() {
382 |     var style = {
383 |       position: 'absolute',
384 |       top: this.state.top,
385 |       left: this.state.left,
386 |       right: this.state.right,
387 |       bottom: this.state.bottom
388 |     };
389 | 
390 |     var _calculateDimensions = this.calculateDimensions(this.state),
391 |         width = _calculateDimensions.width,
392 |         height = _calculateDimensions.height;
393 | 
394 |     var topStyle = {
395 |       height: this.state.top
396 |     };
397 |     var bottomStyle = {
398 |       height: this.state.bottom
399 |     };
400 |     var leftStyle = {
401 |       top: this.state.top,
402 |       right: width + this.state.right,
403 |       bottom: this.state.bottom
404 |     };
405 |     var rightStyle = {
406 |       top: this.state.top,
407 |       left: width + this.state.left,
408 |       bottom: this.state.bottom
409 |     };
410 | 
411 |     return _react2.default.createElement(
412 |       'div',
413 |       { ref: 'box', className: 'DraggableResizable' },
414 |       _react2.default.createElement(
415 |         'div',
416 |         { className: 'DraggableResizable-controls' },
417 |         _react2.default.createElement(
418 |           'label',
419 |           null,
420 |           this.props.offsetXLabel,
421 |           _react2.default.createElement('input', {
422 |             name: 'x',
423 |             value: Math.round(this.state.left),
424 |             onChange: this.controlsMoveBox,
425 |             tabIndex: '-1',
426 |             type: 'number' })
427 |         ),
428 |         _react2.default.createElement(
429 |           'label',
430 |           null,
431 |           this.props.offsetYLabel,
432 |           _react2.default.createElement('input', {
433 |             name: 'y',
434 |             value: Math.round(this.state.top),
435 |             onChange: this.controlsMoveBox,
436 |             tabIndex: '-1',
437 |             type: 'number' })
438 |         ),
439 |         _react2.default.createElement(
440 |           'label',
441 |           null,
442 |           this.props.widthLabel,
443 |           _react2.default.createElement('input', {
444 |             name: 'width',
445 |             value: Math.round(width),
446 |             type: 'number',
447 |             tabIndex: '-1',
448 |             onChange: this.controlsResize })
449 |         ),
450 |         _react2.default.createElement(
451 |           'label',
452 |           null,
453 |           this.props.heightLabel,
454 |           _react2.default.createElement('input', {
455 |             value: Math.round(height),
456 |             type: 'number',
457 |             name: 'height',
458 |             tabIndex: '-1',
459 |             onChange: this.controlsResize })
460 |         )
461 |       ),
462 |       _react2.default.createElement('div', { className: 'DraggableResizable-top', style: topStyle }),
463 |       _react2.default.createElement('div', { className: 'DraggableResizable-left', style: leftStyle }),
464 |       _react2.default.createElement(
465 |         'div',
466 |         { style: style, onMouseDown: this.startMove, onTouchStart: this.startMove },
467 |         this.props.children,
468 |         _react2.default.createElement('div', { className: 'resize-handle resize-handle-se',
469 |           onMouseDown: this.startResize.bind(null, 'se'),
470 |           onTouchStart: this.startResize.bind(null, 'se') }),
471 |         _react2.default.createElement('div', { className: 'resize-handle resize-handle-ne',
472 |           onMouseDown: this.startResize.bind(null, 'ne'),
473 |           onTouchStart: this.startResize.bind(null, 'ne') }),
474 |         _react2.default.createElement('div', { className: 'resize-handle resize-handle-sw',
475 |           onMouseDown: this.startResize.bind(null, 'sw'),
476 |           onTouchStart: this.startResize.bind(null, 'sw') }),
477 |         _react2.default.createElement('div', { className: 'resize-handle resize-handle-nw',
478 |           onMouseDown: this.startResize.bind(null, 'nw'),
479 |           onTouchStart: this.startResize.bind(null, 'nw') })
480 |       ),
481 |       _react2.default.createElement('div', { className: 'DraggableResizable-right', style: rightStyle }),
482 |       _react2.default.createElement('div', { className: 'DraggableResizable-bottom', style: bottomStyle })
483 |     );
484 |   }
485 | });
486 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true
  5 | });
  6 | 
  7 | var _react = require('react');
  8 | 
  9 | var _react2 = _interopRequireDefault(_react);
 10 | 
 11 | var _draggableResizableBox = require('./draggable-resizable-box');
 12 | 
 13 | var _draggableResizableBox2 = _interopRequireDefault(_draggableResizableBox);
 14 | 
 15 | var _dataUriToBlob = require('data-uri-to-blob');
 16 | 
 17 | var _dataUriToBlob2 = _interopRequireDefault(_dataUriToBlob);
 18 | 
 19 | require('./cropper.css');
 20 | 
 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 22 | 
 23 | exports.default = _react2.default.createClass({
 24 |   displayName: 'Cropper',
 25 | 
 26 |   propTypes: {
 27 |     width: _react2.default.PropTypes.number.isRequired,
 28 |     height: _react2.default.PropTypes.number.isRequired,
 29 |     center: _react2.default.PropTypes.bool,
 30 |     image: _react2.default.PropTypes.any,
 31 |     widthLabel: _react2.default.PropTypes.string,
 32 |     heightLabel: _react2.default.PropTypes.string,
 33 |     offsetXLabel: _react2.default.PropTypes.string,
 34 |     offsetYLabel: _react2.default.PropTypes.string,
 35 |     onImageLoaded: _react2.default.PropTypes.func,
 36 |     minConstraints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)
 37 |   },
 38 | 
 39 |   getDefaultProps: function getDefaultProps() {
 40 |     return {
 41 |       center: false,
 42 |       width: 'Width',
 43 |       height: 'Height',
 44 |       offsetXLabel: 'Offset X',
 45 |       offsetYLabel: 'Offset Y'
 46 |     };
 47 |   },
 48 |   getInitialState: function getInitialState() {
 49 |     return {
 50 |       imageLoaded: false,
 51 |       width: this.props.width,
 52 |       height: this.props.height,
 53 |       url: window.URL.createObjectURL(this.props.image)
 54 |     };
 55 |   },
 56 |   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
 57 |     if (this.props.image !== nextProps.image) {
 58 |       this.setState({
 59 |         url: window.URL.createObjectURL(nextProps.image),
 60 |         imageLoaded: false
 61 |       });
 62 |     }
 63 |   },
 64 |   shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
 65 |     var image = this.props.image;
 66 | 
 67 |     return nextProps.image.size !== image.size || nextProps.image.name !== image.name || nextProps.image.type !== image.type || nextState.imageLoaded !== this.state.imageLoaded;
 68 |   },
 69 |   onLoad: function onLoad(evt) {
 70 |     var _this = this;
 71 | 
 72 |     var box = this.refs.box.getBoundingClientRect();
 73 |     this.setState({
 74 |       imageLoaded: true,
 75 |       width: box.width,
 76 |       height: box.height
 77 |     }, function () {
 78 |       var img = _this.refs.image;
 79 |       _this.props.onImageLoaded && _this.props.onImageLoaded(img);
 80 |     });
 81 |   },
 82 |   cropImage: function cropImage() {
 83 |     var _this2 = this;
 84 | 
 85 |     return new Promise(function (resolve, reject) {
 86 |       var img = new Image();
 87 |       img.onload = function () {
 88 |         var canvas = _this2.refs.canvas;
 89 |         var img = _this2.refs.image;
 90 |         var ctx = canvas.getContext('2d');
 91 |         var xScale = img.naturalWidth / _this2.state.width,
 92 |             yScale = img.naturalHeight / _this2.state.height;
 93 | 
 94 | 
 95 |         var imageOffsetX = xScale < 1 ? 0 : _this2.state.offset.left * xScale;
 96 |         var imageOffsetY = yScale < 1 ? 0 : _this2.state.offset.top * yScale;
 97 |         var imageWidth = xScale < 1 ? img.naturalWidth : _this2.state.dimensions.width * xScale;
 98 |         var imageHeight = yScale < 1 ? img.naturalHeight : _this2.state.dimensions.height * yScale;
 99 | 
100 |         var canvasOffsetX = xScale < 1 ? Math.floor((_this2.state.dimensions.width - img.naturalWidth) / 2) : 0;
101 |         var canvasOffsetY = yScale < 1 ? Math.floor((_this2.state.dimensions.height - img.naturalHeight) / 2) : 0;
102 |         var canvasWidth = xScale < 1 ? img.naturalWidth : _this2.props.width;
103 |         var canvasHeight = yScale < 1 ? img.naturalHeight : _this2.props.height;
104 | 
105 |         ctx.clearRect(0, 0, _this2.props.width, _this2.props.height);
106 |         ctx.drawImage(img, imageOffsetX, imageOffsetY, imageWidth, imageHeight, canvasOffsetX, canvasOffsetY, canvasWidth, canvasHeight);
107 |         resolve((0, _dataUriToBlob2.default)(canvas.toDataURL()));
108 |       };
109 |       img.src = window.URL.createObjectURL(_this2.props.image);
110 |     });
111 |   },
112 |   onChange: function onChange(offset, dimensions) {
113 |     this.setState({ offset: offset, dimensions: dimensions });
114 |   },
115 |   render: function render() {
116 |     return _react2.default.createElement(
117 |       'div',
118 |       {
119 |         ref: 'box',
120 |         className: 'Cropper',
121 |         style: {
122 |           minWidth: this.props.width,
123 |           minHeight: this.props.height
124 |         } },
125 |       _react2.default.createElement('canvas', {
126 |         className: 'Cropper-canvas',
127 |         ref: 'canvas',
128 |         width: this.props.width,
129 |         height: this.props.height }),
130 |       _react2.default.createElement('img', {
131 |         ref: 'image',
132 |         src: this.state.url,
133 |         className: 'Cropper-image',
134 |         onLoad: this.onLoad,
135 |         style: { top: this.state.height / 2 } }),
136 |       this.state.imageLoaded && _react2.default.createElement(
137 |         'div',
138 |         { className: 'box' },
139 |         _react2.default.createElement(
140 |           _draggableResizableBox2.default,
141 |           {
142 |             aspectRatio: this.props.width / this.props.height,
143 |             width: this.state.width,
144 |             height: this.state.height,
145 |             minConstraints: this.props.minConstraints,
146 |             onChange: this.onChange,
147 |             widthLabel: this.props.widthLabel,
148 |             heightLabel: this.props.heightLabel,
149 |             offsetXLabel: this.props.offsetXLabel,
150 |             offsetYLabel: this.props.offsetYLabel },
151 |           _react2.default.createElement('div', { className: 'Cropper-box' })
152 |         )
153 |       )
154 |     );
155 |   }
156 | });
157 | 


--------------------------------------------------------------------------------
/lib/cropper.css:
--------------------------------------------------------------------------------
  1 | .Cropper {
  2 |   position: relative;
  3 |   display: inline-block;
  4 |   max-width:100%;
  5 |   max-height:100%;
  6 | }
  7 | 
  8 | .box {
  9 |   position: absolute;
 10 |   top: 0;
 11 |   left: 0;
 12 |   bottom: 0;
 13 |   right: 0;
 14 | }
 15 | 
 16 | .Cropper-box {
 17 |   position: absolute;
 18 |   top: 0;
 19 |   left: 0;
 20 |   bottom: 0;
 21 |   right: 0;
 22 |   cursor: move;
 23 |   border: #fff solid 1px;
 24 | }
 25 | 
 26 | .Cropper-canvas {
 27 |   visibility: hidden;
 28 |   position: absolute;
 29 | }
 30 | 
 31 | .Cropper-image {
 32 |   vertical-align: middle;
 33 |   max-width: 100%;
 34 |   position: relative;
 35 |   transform: translate(-50%, -50%);
 36 |   left: 50%;
 37 | }
 38 | 
 39 | .resize-handle {
 40 |   position: absolute;
 41 |   background-color: #ECEEEF;
 42 |   border: #8295AB solid 1px;
 43 |   width: 13px;
 44 |   height: 13px;
 45 |   z-index: 1;
 46 | }
 47 | 
 48 | .resize-handle-se {
 49 |   bottom: 0;
 50 |   right: 0;
 51 |   cursor: nwse-resize;
 52 |   transform: translate(50%, 50%);
 53 | }
 54 | .resize-handle-ne {
 55 |   right: 0;
 56 |   top: 0;
 57 |   cursor: nesw-resize;
 58 |   transform: translate(50%, -50%);
 59 | }
 60 | .resize-handle-sw {
 61 |   bottom: 0;
 62 |   left: 0;
 63 |   cursor: nesw-resize;
 64 |   transform: translate(-50%, 50%);
 65 | }
 66 | .resize-handle-nw {
 67 |   top: 0;
 68 |   bottom: 0;
 69 |   cursor: nwse-resize;
 70 |   transform: translate(-50%, -50%);
 71 | }
 72 | 
 73 | .DraggableResizable {
 74 |   position: relative;
 75 |   width: 100%;
 76 |   height: 100%;
 77 | }
 78 | 
 79 | .DraggableResizable-controls {
 80 |   border: 0;
 81 |   clip: rect(0 0 0 0);
 82 |   height: 1px;
 83 |   margin: -1px;
 84 |   overflow: hidden;
 85 |   padding: 0;
 86 |   position: absolute;
 87 |   width: 1px;
 88 | }
 89 | 
 90 | .DraggableResizable-top,
 91 | .DraggableResizable-left,
 92 | .DraggableResizable-bottom,
 93 | .DraggableResizable-right {
 94 |   position: absolute;
 95 |   background-color: rgba(0,0,0,.7);
 96 | }
 97 | 
 98 | .DraggableResizable-top {
 99 |   top: 0;
100 |   left: 0;
101 |   right: 0;
102 | }
103 | .DraggableResizable-bottom {
104 |   bottom: 0;
105 |   left: 0;
106 |   right: 0;
107 | }
108 | .DraggableResizable-left {
109 |   left: 0;
110 | }
111 | .DraggableResizable-right {
112 |   right: 0;
113 | }
114 | 


--------------------------------------------------------------------------------
/lib/draggable-resizable-box.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | export default React.createClass({
  4 |   displayName: 'DraggableResizableBox',
  5 | 
  6 |   propTypes: {
  7 |     aspectRatio: React.PropTypes.number.isRequired,
  8 |     width: React.PropTypes.number.isRequired,
  9 |     height: React.PropTypes.number.isRequired,
 10 |     onChange: React.PropTypes.func,
 11 |     offset: React.PropTypes.array,
 12 |     minConstraints: React.PropTypes.array,
 13 |     children: React.PropTypes.node,
 14 |     widthLabel: React.PropTypes.string,
 15 |     heightLabel: React.PropTypes.string,
 16 |     offsetXLabel: React.PropTypes.string,
 17 |     offsetYLabel: React.PropTypes.string
 18 |   },
 19 | 
 20 |   getDefaultProps () {
 21 |     return {
 22 |       widthLabel: 'Width',
 23 |       heightLabel: 'Height',
 24 |       offsetXLabel: 'Offset X',
 25 |       offsetYLabel: 'Offset Y'
 26 |     }
 27 |   },
 28 | 
 29 |   getInitialState () {
 30 |     let [width, height] = this.preserveAspectRatio(this.props.width, this.props.height)
 31 |     let centerYOffset = (this.props.height - height) / 2
 32 |     let centerXOffset = (this.props.width - width) / 2
 33 |     return {
 34 |       top: centerYOffset,
 35 |       left: centerXOffset,
 36 |       bottom: centerYOffset,
 37 |       right: centerXOffset,
 38 |       width: width,
 39 |       height: height
 40 |     }
 41 |   },
 42 | 
 43 |   componentDidMount () {
 44 |     document.addEventListener('mousemove', this.eventMove)
 45 |     document.addEventListener('mouseup', this.eventEnd)
 46 |     document.addEventListener('touchmove', this.eventMove)
 47 |     document.addEventListener('touchend', this.eventEnd)
 48 |     document.addEventListener('keydown', this.handleKey)
 49 |     this.props.onChange({
 50 |         top: this.state.top,
 51 |         left: this.state.left
 52 |     }, {
 53 |       width: this.state.width,
 54 |       height: this.state.height
 55 |     })
 56 |   },
 57 | 
 58 |   componentWillUnmount () {
 59 |     document.removeEventListener('mousemove', this.eventMove)
 60 |     document.removeEventListener('mouseup', this.eventEnd)
 61 |     document.removeEventListener('touchmove', this.eventMove)
 62 |     document.removeEventListener('touchend', this.eventEnd)
 63 |     document.removeEventListener('keydown', this.handleKey)
 64 |   },
 65 | 
 66 |   calculateDimensions ({top, left, bottom, right}) {
 67 |     return {width: this.props.width - left - right, height: this.props.height - top - bottom}
 68 |   },
 69 | 
 70 |   // If you do this, be careful of constraints
 71 |   preserveAspectRatio (width, height) {
 72 |     if(this.props.minConstraints) {
 73 |       width = Math.max(width, this.props.minConstraints[0])
 74 |       height = Math.max(height, this.props.minConstraints[1])
 75 |     }
 76 |     const currentAspectRatio = width / height
 77 | 
 78 |     if (currentAspectRatio < this.props.aspectRatio) {
 79 |       return [width, width / this.props.aspectRatio]
 80 |     } else if (currentAspectRatio > this.props.aspectRatio) {
 81 |       return [height * this.props.aspectRatio, height]
 82 |     } else {
 83 |       return [width, height]
 84 |     }
 85 |   },
 86 | 
 87 |   constrainBoundary (side) {
 88 |     return side < 0 ? 0 : side
 89 |   },
 90 | 
 91 |   getClientCoordinates (evt) {
 92 |     return evt.touches ? {
 93 |       clientX: evt.touches[0].clientX,
 94 |       clientY: evt.touches[0].clientY
 95 |     } :
 96 |     {
 97 |       clientX: evt.clientX,
 98 |       clientY: evt.clientY
 99 |     }
100 |   },
101 | 
102 |   eventMove (evt) {
103 |     if (this.state.resizing) {
104 |       this.onResize(evt)
105 |     } else if (this.state.moving) {
106 |       this.eventMoveBox(evt)
107 |     }
108 |   },
109 | 
110 |   eventEnd (evt) {
111 |     if (this.state.resizing) {
112 |       this.stopResize(evt)
113 |     } else if (this.state.moving) {
114 |       this.stopMove(evt)
115 |     }
116 |   },
117 | 
118 |   // Resize methods
119 |   startResize (corner, event) {
120 |     event.stopPropagation()
121 |     event.preventDefault()
122 |     this.setState({
123 |       resizing: true,
124 |       corner
125 |     })
126 |   },
127 | 
128 |   stopResize () {
129 |     this.setState({resizing: false})
130 |   },
131 | 
132 |   // resize strategies
133 |   nw (mousePos, boxPos) {
134 |     let pos = Object.assign({}, this.state, {
135 |       top: this.constrainBoundary(mousePos.clientY - boxPos.top),
136 |       left: this.constrainBoundary(mousePos.clientX - boxPos.left)
137 |     })
138 |     let dimensions = this.calculateDimensions(pos)
139 |     let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)
140 |     pos.top = this.props.height - pos.bottom - height
141 |     pos.left = this.props.width - pos.right - width
142 |     return pos
143 |   },
144 |   ne (mousePos, boxPos) {
145 |     let pos = Object.assign({}, this.state, {
146 |       top: this.constrainBoundary(mousePos.clientY - boxPos.top),
147 |       right: this.constrainBoundary(boxPos.right - mousePos.clientX)
148 |     })
149 |     let dimensions = this.calculateDimensions(pos)
150 |     let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)
151 |     pos.top = this.props.height - pos.bottom - height
152 |     pos.right = this.props.width - pos.left - width
153 |     return pos
154 |   },
155 |   se (mousePos, boxPos) {
156 |     let pos = Object.assign({}, this.state, {
157 |       bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),
158 |       right: this.constrainBoundary(boxPos.right - mousePos.clientX)
159 |     })
160 |     let dimensions = this.calculateDimensions(pos)
161 |     let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)
162 |     pos.bottom = this.props.height - pos.top - height
163 |     pos.right = this.props.width - pos.left - width
164 |     return pos
165 |   },
166 |   sw (mousePos, boxPos) {
167 |     let pos = Object.assign({}, this.state, {
168 |       bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),
169 |       left: this.constrainBoundary(mousePos.clientX - boxPos.left)
170 |     })
171 |     let dimensions = this.calculateDimensions(pos)
172 |     let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)
173 |     pos.bottom = this.props.height - pos.top - height
174 |     pos.left = this.props.width - pos.right - width
175 |     return pos
176 |   },
177 | 
178 |   onResize (event) {
179 |     let box = this.refs.box.parentElement.parentElement.getBoundingClientRect()
180 |     let coordinates = this.getClientCoordinates(event)
181 |     let position = this[this.state.corner](coordinates, box)
182 |     this.resize(position, coordinates)
183 |   },
184 | 
185 |   controlsResize (event) {
186 |     let box = this.refs.box.parentElement.parentElement.getBoundingClientRect()
187 |     let width = event.target.name === 'width' ? +event.target.value : +event.target.value * this.props.aspectRatio
188 |     let height = event.target.name === 'height' ? +event.target.value : +event.target.value / this.props.aspectRatio
189 |     let dimensions = this.preserveAspectRatio(width, height)
190 |     width = dimensions[0]
191 |     height = dimensions[1]
192 | 
193 |     if (width > box.width - this.state.left ||
194 |         height > box.height - this.state.top) return
195 | 
196 |     let widthDifference = this.state.width - width
197 |     let heightDifference = this.state.height - height
198 |     let pos = Object.assign({}, this.state, {
199 |       right: this.state.right + widthDifference,
200 |       bottom: this.state.bottom + heightDifference
201 |     })
202 |     let coordinates = {
203 |       clientX: box.right - pos.right,
204 |       clientY: box.bottom - pos.bottom
205 |     }
206 | 
207 |     this.resize(pos, coordinates)
208 |   },
209 | 
210 |   resize (position, coordinates) {
211 |     let dimensions = this.calculateDimensions(position)
212 |     var widthChanged = dimensions.width !== this.state.width, heightChanged = dimensions.height !== this.state.height
213 |     if (!widthChanged && !heightChanged) return
214 | 
215 |     this.setState(Object.assign({}, coordinates, position, dimensions), () => {
216 |       this.props.onChange({
217 |         top: position.top,
218 |         left: position.left
219 |       }, dimensions)
220 |     })
221 |   },
222 | 
223 |   // Move methods
224 |   startMove (evt) {
225 |     let {clientX, clientY} = this.getClientCoordinates(evt)
226 |     this.setState({
227 |       moving: true,
228 |       clientX: clientX,
229 |       clientY: clientY
230 |     })
231 |   },
232 | 
233 |   stopMove (evt) {
234 |     this.setState({
235 |       moving: false
236 |     })
237 |   },
238 | 
239 |   eventMoveBox (evt) {
240 |     evt.preventDefault()
241 |     let {clientX, clientY} = this.getClientCoordinates(evt)
242 |     let movedX = clientX - this.state.clientX
243 |     let movedY = clientY - this.state.clientY
244 | 
245 |     this.moveBox(clientX, clientY, movedX, movedY)
246 |   },
247 | 
248 |   controlsMoveBox (evt) {
249 |     let movedX = evt.target.name === 'x' ? evt.target.value - this.state.left : 0
250 |     let movedY = evt.target.name === 'y' ? evt.target.value - this.state.top : 0
251 |     this.moveBox(0, 0, movedX, movedY)
252 |   },
253 | 
254 |   moveBox (clientX, clientY, movedX, movedY) {
255 |     let position = {
256 |       top: this.constrainBoundary(this.state.top + movedY),
257 |       left: this.constrainBoundary(this.state.left + movedX),
258 |       bottom: this.constrainBoundary(this.state.bottom - movedY),
259 |       right: this.constrainBoundary(this.state.right - movedX)
260 |     }
261 | 
262 |     if (!position.top) {
263 |       position.bottom = this.props.height - this.state.height
264 |     }
265 |     if (!position.bottom) {
266 |       position.top = this.props.height - this.state.height
267 |     }
268 |     if (!position.left) {
269 |       position.right = this.props.width - this.state.width
270 |     }
271 |     if (!position.right) {
272 |       position.left = this.props.width - this.state.width
273 |     }
274 | 
275 |     this.setState(Object.assign({}, {
276 |       clientX: clientX,
277 |       clientY: clientY
278 |     }, position), () => {
279 |       this.props.onChange({
280 |         top: position.top,
281 |         left: position.left
282 |       }, this.calculateDimensions(position))
283 |     })
284 |   },
285 | 
286 |   keyboardResize (change) {
287 |     if (this.state.right - change < 0) { return }
288 |     if (this.state.bottom - change < 0) { return }
289 | 
290 |     const [width, height] = this.preserveAspectRatio(
291 |       this.state.width + change,
292 |       this.state.height + change
293 |     )
294 |     const widthChange = width - this.state.width
295 |     const heightChange = height - this.state.height
296 | 
297 |     this.setState({
298 |       bottom: this.state.bottom - heightChange,
299 |       right: this.state.right - widthChange,
300 |       width,
301 |       height
302 |     })
303 |   },
304 | 
305 |   handleKey (event) {
306 |     // safari doesn't support event.key, so fall back to keyCode
307 |     if (event.shiftKey) {
308 |       if (event.key === 'ArrowUp' || event.keyCode === 38) {
309 |         this.keyboardResize(-10)
310 |         event.preventDefault()
311 |       } else if (event.key === 'ArrowDown' || event.keyCode === 40) {
312 |         this.keyboardResize(10)
313 |         event.preventDefault()
314 |       } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {
315 |         this.keyboardResize(-10)
316 |         event.preventDefault()
317 |       } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
318 |         this.keyboardResize(10)
319 |         event.preventDefault()
320 |       }
321 |     } else {
322 |       if (event.key === 'ArrowUp' || event.keyCode === 38) {
323 |         this.moveBox(this.state.clientX, this.state.clientY, 0, -10)
324 |         event.preventDefault()
325 |       } else if (event.key === 'ArrowDown' || event.keyCode === 40) {
326 |         this.moveBox(this.state.clientX, this.state.clientY, 0, 10)
327 |         event.preventDefault()
328 |       } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {
329 |         this.moveBox(this.state.clientX, this.state.clientY, -10, 0)
330 |         event.preventDefault()
331 |       } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
332 |         this.moveBox(this.state.clientX, this.state.clientY, 10, 0)
333 |         event.preventDefault()
334 |       }
335 |     }
336 |   },
337 | 
338 |   render () {
339 |     let style = {
340 |       position: 'absolute',
341 |       top: this.state.top,
342 |       left: this.state.left,
343 |       right: this.state.right,
344 |       bottom: this.state.bottom
345 |     }
346 |     let {width, height} = this.calculateDimensions(this.state)
347 |     let topStyle = {
348 |       height: this.state.top
349 |     }
350 |     let bottomStyle = {
351 |       height: this.state.bottom
352 |     }
353 |     let leftStyle = {
354 |       top: this.state.top,
355 |       right: width + this.state.right,
356 |       bottom: this.state.bottom
357 |     }
358 |     let rightStyle = {
359 |       top: this.state.top,
360 |       left: width + this.state.left,
361 |       bottom: this.state.bottom
362 |     }
363 | 
364 |     return (
365 |       <div ref='box' className='DraggableResizable'>
366 |         <div className='DraggableResizable-controls'>
367 |           <label>
368 |             {this.props.offsetXLabel}
369 |             <input
370 |               name='x'
371 |               value={Math.round(this.state.left)}
372 |               onChange={this.controlsMoveBox}
373 |               tabIndex="-1"
374 |               type='number' />
375 |           </label>
376 |           <label>
377 |             {this.props.offsetYLabel}
378 |             <input
379 |               name='y'
380 |               value={Math.round(this.state.top)}
381 |               onChange={this.controlsMoveBox}
382 |               tabIndex="-1"
383 |               type='number' />
384 |           </label>
385 |           <label>
386 |             {this.props.widthLabel}
387 |             <input
388 |               name='width'
389 |               value={Math.round(width)}
390 |               type='number'
391 |               tabIndex="-1"
392 |               onChange={this.controlsResize} />
393 |           </label>
394 |           <label>
395 |             {this.props.heightLabel}
396 |             <input
397 |               value={Math.round(height)}
398 |               type='number'
399 |               name='height'
400 |               tabIndex="-1"
401 |               onChange={this.controlsResize} />
402 |           </label>
403 |         </div>
404 |         <div className='DraggableResizable-top' style={topStyle}></div>
405 |         <div className='DraggableResizable-left' style={leftStyle}></div>
406 |         <div style={style} onMouseDown={this.startMove} onTouchStart={this.startMove}>
407 |           {this.props.children}
408 |           <div className='resize-handle resize-handle-se'
409 |             onMouseDown={this.startResize.bind(null, 'se')}
410 |             onTouchStart={this.startResize.bind(null, 'se')}>
411 |           </div>
412 |           <div className='resize-handle resize-handle-ne'
413 |             onMouseDown={this.startResize.bind(null, 'ne')}
414 |             onTouchStart={this.startResize.bind(null, 'ne')}>
415 |           </div>
416 |           <div className='resize-handle resize-handle-sw'
417 |             onMouseDown={this.startResize.bind(null, 'sw')}
418 |             onTouchStart={this.startResize.bind(null, 'sw')}>
419 |           </div>
420 |           <div className='resize-handle resize-handle-nw'
421 |             onMouseDown={this.startResize.bind(null, 'nw')}
422 |             onTouchStart={this.startResize.bind(null, 'nw')}>
423 |           </div>
424 |         </div>
425 |         <div className='DraggableResizable-right' style={rightStyle}></div>
426 |         <div className='DraggableResizable-bottom' style={bottomStyle}></div>
427 |       </div>
428 |     )
429 |   }
430 | })
431 | 


--------------------------------------------------------------------------------
/lib/index.src.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import DraggableResizableBox from './draggable-resizable-box'
  3 | import toBlob from 'data-uri-to-blob'
  4 | import './cropper.css'
  5 | 
  6 | export default React.createClass({
  7 |   displayName: 'Cropper',
  8 | 
  9 |   propTypes: {
 10 |     width: React.PropTypes.number.isRequired,
 11 |     height: React.PropTypes.number.isRequired,
 12 |     center: React.PropTypes.bool,
 13 |     image: React.PropTypes.any,
 14 |     widthLabel: React.PropTypes.string,
 15 |     heightLabel: React.PropTypes.string,
 16 |     offsetXLabel: React.PropTypes.string,
 17 |     offsetYLabel: React.PropTypes.string,
 18 |     onImageLoaded: React.PropTypes.func,
 19 |     minConstraints: React.PropTypes.arrayOf(React.PropTypes.number)
 20 |   },
 21 | 
 22 |   getDefaultProps () {
 23 |     return {
 24 |       center: false,
 25 |       width: 'Width',
 26 |       height: 'Height',
 27 |       offsetXLabel: 'Offset X',
 28 |       offsetYLabel: 'Offset Y'
 29 |     }
 30 |   },
 31 | 
 32 |   getInitialState () {
 33 |     return {
 34 |       imageLoaded: false,
 35 |       width: this.props.width,
 36 |       height: this.props.height,
 37 |       url: window.URL.createObjectURL(this.props.image)
 38 |     }
 39 |   },
 40 | 
 41 |   componentWillReceiveProps (nextProps) {
 42 |     if (this.props.image !== nextProps.image) {
 43 |       this.setState({
 44 |         url: window.URL.createObjectURL(nextProps.image),
 45 |         imageLoaded: false
 46 |       })
 47 |     }
 48 |   },
 49 | 
 50 |   shouldComponentUpdate (nextProps, nextState) {
 51 |     let {image} = this.props
 52 |     return nextProps.image.size !== image.size ||
 53 |         nextProps.image.name !== image.name ||
 54 |         nextProps.image.type !== image.type ||
 55 |         nextState.imageLoaded !== this.state.imageLoaded
 56 |   },
 57 | 
 58 |   onLoad (evt) {
 59 |     let box = this.refs.box.getBoundingClientRect()
 60 |     this.setState({
 61 |       imageLoaded: true,
 62 |       width: box.width,
 63 |       height: box.height
 64 |     }, () => {
 65 |       let img = this.refs.image
 66 |       this.props.onImageLoaded && this.props.onImageLoaded(img)
 67 |     })
 68 |   },
 69 | 
 70 |   cropImage () {
 71 |     return new Promise((resolve, reject) => {
 72 |       let img = new Image()
 73 |       img.onload = () => {
 74 |         let canvas = this.refs.canvas
 75 |         let img = this.refs.image
 76 |         let ctx = canvas.getContext('2d')
 77 |         let [xScale, yScale] = [img.naturalWidth / this.state.width,
 78 |                                 img.naturalHeight / this.state.height]
 79 | 
 80 |         let imageOffsetX = xScale < 1 ? 0 : this.state.offset.left * xScale
 81 |         let imageOffsetY = yScale < 1 ? 0 : this.state.offset.top * yScale
 82 |         let imageWidth = xScale < 1 ? img.naturalWidth : this.state.dimensions.width * xScale
 83 |         let imageHeight = yScale < 1 ? img.naturalHeight : this.state.dimensions.height * yScale
 84 | 
 85 |         let canvasOffsetX = xScale < 1 ? Math.floor((this.state.dimensions.width - img.naturalWidth) / 2) : 0
 86 |         let canvasOffsetY = yScale < 1 ? Math.floor((this.state.dimensions.height - img.naturalHeight) / 2) : 0
 87 |         let canvasWidth = xScale < 1 ? img.naturalWidth : this.props.width
 88 |         let canvasHeight = yScale < 1 ? img.naturalHeight : this.props.height
 89 | 
 90 |         ctx.clearRect(0, 0, this.props.width, this.props.height)
 91 |         ctx.drawImage(img, imageOffsetX, imageOffsetY, imageWidth, imageHeight, canvasOffsetX, canvasOffsetY, canvasWidth, canvasHeight)
 92 |         resolve(toBlob(canvas.toDataURL()))
 93 |       }
 94 |       img.src = window.URL.createObjectURL(this.props.image)
 95 |     })
 96 |   },
 97 | 
 98 |   onChange (offset, dimensions) {
 99 |     this.setState({offset, dimensions})
100 |   },
101 | 
102 |   render () {
103 |     return (
104 |       <div
105 |         ref='box'
106 |         className='Cropper'
107 |         style={{
108 |           minWidth: this.props.width,
109 |           minHeight: this.props.height
110 |         }}>
111 |         <canvas
112 |           className='Cropper-canvas'
113 |           ref='canvas'
114 |           width={this.props.width}
115 |           height={this.props.height}>
116 |         </canvas>
117 |         <img
118 |           ref='image'
119 |           src={this.state.url}
120 |           className='Cropper-image'
121 |           onLoad={this.onLoad}
122 |           style={{top: this.state.height / 2}}/>
123 |         {this.state.imageLoaded &&
124 |           <div className='box'>
125 |             <DraggableResizableBox
126 |               aspectRatio={this.props.width / this.props.height}
127 |               width={this.state.width}
128 |               height={this.state.height}
129 |               minConstraints={this.props.minConstraints}
130 |               onChange={this.onChange}
131 |               widthLabel={this.props.widthLabel}
132 |               heightLabel={this.props.heightLabel}
133 |               offsetXLabel={this.props.offsetXLabel}
134 |               offsetYLabel={this.props.offsetYLabel}>
135 |                 <div className='Cropper-box'></div>
136 |             </DraggableResizableBox>
137 |           </div>}
138 |       </div>
139 |     )
140 |   }
141 | })
142 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-crop",
 3 |   "version": "4.0.2",
 4 |   "description": "An image cropper that moves the cropper rather than the image",
 5 |   "repository": "https://github.com/instructure-react/react-crop",
 6 |   "main": "index.js",
 7 |   "scripts": {
 8 |     "build": "NODE_ENV=production webpack --config webpack.dist.config.js",
 9 |     "compile-index": "cp lib/cropper.css . && babel lib/index.src.js --out-file index.js",
10 |     "compile-box": "babel lib/draggable-resizable-box.js --out-file draggable-resizable-box.js",
11 |     "compile": "npm run compile-index && npm run compile-box && webpack",
12 |     "docs": "webpack-dev-server --content-base docs/",
13 |     "prepublish": "npm run compile && npm run build"
14 |   },
15 |   "keywords": [
16 |     "react",
17 |     "image",
18 |     "crop",
19 |     "react-component"
20 |   ],
21 |   "author": "Matthew Sessions <shichongrui@gmail.com> (http://www.matthewsessions.com/)",
22 |   "license": "MIT",
23 |   "devDependencies": {
24 |     "babel-cli": "^6.9.0",
25 |     "babel-core": "^6.9.0",
26 |     "babel-loader": "^6.2.4",
27 |     "babel-plugin-transform-object-assign": "^6.8.0",
28 |     "babel-polyfill": "^6.20.0",
29 |     "babel-preset-es2015": "^6.9.0",
30 |     "babel-preset-react": "^6.5.0",
31 |     "babel-preset-stage-1": "^6.5.0",
32 |     "css-loader": "^0.26.1",
33 |     "node-libs-browser": "0.5.2",
34 |     "react": "^15.4.1",
35 |     "react-dom": "15.4.1",
36 |     "style-loader": "^0.13.1",
37 |     "webpack": "1.12.0",
38 |     "webpack-dev-server": "1.10.1"
39 |   },
40 |   "dependencies": {
41 |     "autoprefixer": "5.2.0",
42 |     "data-uri-to-blob": "0.0.4",
43 |     "postcss-cli": "2.0.0"
44 |   },
45 |   "peerDependencies": {
46 |     "react": ">=0.14.0"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack')
 2 | 
 3 | module.exports = {
 4 |   entry: ['./docs/index.js', 'babel-polyfill'],
 5 |   output: {
 6 |     path: './docs',
 7 |     filename: 'bundle.js'
 8 |   },
 9 |   module: {
10 |     loaders: [
11 |       {
12 |         test: /\.js?$/,
13 |         exclude: /node_modules/,
14 |         loader: 'babel'
15 |       },
16 |       {
17 |         test: /\.css$/,
18 |         loader: 'style-loader!css-loader'
19 |       }
20 |     ]
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/webpack.dist.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 3 | 
 4 | module.exports = {
 5 | 
 6 |   entry: {
 7 |     'react-crop': './lib/index.src.js',
 8 |     'react-crop.min': './lib/index.src.js'
 9 |   },
10 | 
11 |   externals: [
12 |     'react',
13 |     'react-dom'
14 |   ],
15 | 
16 |   output: {
17 |     filename: '[name].js',
18 |     chunkFilename: '[id].chunk.js',
19 |     path: 'dist',
20 |     publicPath: '/',
21 |     libraryTarget: 'umd',
22 |     library: 'ReactCrop'
23 |   },
24 | 
25 |   devtool: 'source-map',
26 | 
27 |   plugins: [
28 |     new webpack.DefinePlugin({
29 |       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
30 |     }),
31 |     new UglifyJsPlugin({
32 |       include: /\.min\.js$/,
33 |       minimize: true,
34 |       compress: {
35 |         warnings: false
36 |       }
37 |     })
38 |   ],
39 | 
40 |   module: {
41 |     loaders: [
42 |       { test: /\.js?$/, exclude: /node_modules/, loader: 'babel'},
43 |       {
44 |         test: /\.css$/,
45 |         loader: 'style-loader!css-loader'
46 |       }
47 |     ]
48 |   }
49 | 
50 | };
51 | 


--------------------------------------------------------------------------------