{"version":3,"sources":["Demo/Extension/ImageCropper.js","assets/images/light-box/l1.jpg"],"names":["ImageCropper","props","_this","Object","E_next_react_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_0__","this","E_next_react_node_modules_babel_runtime_helpers_esm_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__","E_next_react_node_modules_babel_runtime_helpers_esm_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__","call","crop","bind","E_next_react_node_modules_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_4__","state","image","previewImage","dataX","dataY","dataHeight","dataWidth","dataRotate","dataScaleX","dataScaleY","event","dataUrl","refs","myRef","getCroppedCanvas","toDataURL","setState","Math","round","detail","x","y","height","width","rotate","scaleX","scaleY","react__WEBPACK_IMPORTED_MODULE_6___default","a","createElement","react_bootstrap__WEBPACK_IMPORTED_MODULE_7__","react_bootstrap__WEBPACK_IMPORTED_MODULE_8__","sm","react_bootstrap__WEBPACK_IMPORTED_MODULE_9__","Header","Body","md","className","react_cropper__WEBPACK_IMPORTED_MODULE_12___default","ref","src","style","aspectRatio","guides","alt","react_bootstrap__WEBPACK_IMPORTED_MODULE_10__","Prepend","Text","id","react_bootstrap__WEBPACK_IMPORTED_MODULE_11__","defaultValue","readOnly","Component","module","exports","__webpack_require__","p"],"mappings":"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","file":"static/js/117.c086d2bc.chunk.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport { Row, Col, Card, InputGroup, FormControl } from \"react-bootstrap\";\r\nimport Cropper from \"react-cropper\";\r\nimport previewImage from \"../../assets/images/light-box/l1.jpg\";\r\nimport \"cropperjs/dist/cropper.css\";\r\n\r\nclass ImageCropper extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.crop = this.crop.bind(this);\r\n    this.state = {\r\n      image: previewImage,\r\n      dataX: \"\",\r\n      dataY: \"\",\r\n      dataHeight: \"\",\r\n      dataWidth: \"\",\r\n      dataRotate: \"\",\r\n      dataScaleX: \"\",\r\n      dataScaleY: \"\"\r\n    };\r\n  }\r\n  crop(event) {\r\n    let dataUrl = this.refs.myRef.getCroppedCanvas().toDataURL();\r\n    this.setState({\r\n      image: dataUrl,\r\n      dataX: Math.round(event.detail.x),\r\n      dataY: Math.round(event.detail.y),\r\n      dataHeight: Math.round(event.detail.height),\r\n      dataWidth: Math.round(event.detail.width),\r\n      dataRotate: Math.round(event.detail.rotate),\r\n      dataScaleX: Math.round(event.detail.scaleX),\r\n      dataScaleY: Math.round(event.detail.scaleY)\r\n    });\r\n  }\r\n  render() {\r\n    return (\r\n      <Row>\r\n        <Col sm={12}>\r\n          <Card>\r\n            <Card.Header>\r\n              <h5>Image Cropper Plugin</h5>\r\n            </Card.Header>\r\n            <Card.Body>\r\n              <Row>\r\n                <Col md={9}>\r\n                  <div className=\"m-b-4\">\r\n                    <Cropper\r\n                      ref=\"myRef\"\r\n                      src={previewImage}\r\n                      style={{ height: 420, width: \"100%\" }}\r\n                      // Cropper.js options\r\n                      aspectRatio={16 / 9}\r\n                      guides={true}\r\n                      crop={this.crop}\r\n                    />\r\n                  </div>\r\n                </Col>\r\n                <Col md={3}>\r\n                  <div className=\"docs-preview clearfix\">\r\n                    <div className=\"img-preview preview-md\">\r\n                      <img src={this.state.image} alt=\"s\" />\r\n                    </div>\r\n                    <div className=\"img-preview preview-sm\">\r\n                      <img src={this.state.image} alt=\"s\" />\r\n                    </div>\r\n                    <div className=\"img-preview preview-xs\">\r\n                      <img src={this.state.image} alt=\"s\" />\r\n                    </div>\r\n                  </div>\r\n                  <div className=\"docs-data\">\r\n                      <InputGroup className=\"mb-3\">\r\n                          <InputGroup.Prepend>\r\n                              <InputGroup.Text id=\"cropper-x\">X</InputGroup.Text>\r\n                          </InputGroup.Prepend>\r\n                          <FormControl defaultValue={this.state.dataX} readOnly\r\n                          />\r\n                      </InputGroup>\r\n                      <InputGroup className=\"mb-3\">\r\n                          <InputGroup.Prepend>\r\n                              <InputGroup.Text id=\"cropper-y\">Y</InputGroup.Text>\r\n                          </InputGroup.Prepend>\r\n                          <FormControl defaultValue={this.state.dataY} readOnly\r\n                          />\r\n                      </InputGroup>\r\n                      <InputGroup className=\"mb-3\">\r\n                          <InputGroup.Prepend>\r\n                              <InputGroup.Text id=\"cropper-width\">Width</InputGroup.Text>\r\n                          </InputGroup.Prepend>\r\n                          <FormControl defaultValue={this.state.dataWidth} readOnly\r\n                          />\r\n                      </InputGroup>\r\n                      <InputGroup className=\"mb-3\">\r\n                          <InputGroup.Prepend>\r\n                              <InputGroup.Text id=\"cropper-height\">Height</InputGroup.Text>\r\n                          </InputGroup.Prepend>\r\n                          <FormControl defaultValue={this.state.dataHeight} readOnly\r\n                          />\r\n                      </InputGroup>\r\n                      <InputGroup className=\"mb-3\">\r\n                          <InputGroup.Prepend>\r\n                              <InputGroup.Text id=\"cropper-rotate\">Rotate</InputGroup.Text>\r\n                          </InputGroup.Prepend>\r\n                          <FormControl defaultValue={this.state.dataRotate} readOnly\r\n                          />\r\n                      </InputGroup>\r\n                      <InputGroup className=\"mb-3\">\r\n                          <InputGroup.Prepend>\r\n                              <InputGroup.Text id=\"cropper-scale-x\">ScaleX</InputGroup.Text>\r\n                          </InputGroup.Prepend>\r\n                          <FormControl defaultValue={this.state.dataScaleX} readOnly\r\n                          />\r\n                      </InputGroup>\r\n                      <InputGroup className=\"mb-3\">\r\n                          <InputGroup.Prepend>\r\n                              <InputGroup.Text id=\"cropper-scale-y\">ScaleY</InputGroup.Text>\r\n                          </InputGroup.Prepend>\r\n                          <FormControl defaultValue={this.state.dataScaleY} readOnly\r\n                          />\r\n                      </InputGroup>\r\n                  </div>\r\n                </Col>\r\n              </Row>\r\n            </Card.Body>\r\n          </Card>\r\n        </Col>\r\n      </Row>\r\n    );\r\n  }\r\n}\r\n\r\nexport default ImageCropper;\r\n","module.exports = __webpack_public_path__ + \"static/media/l1.700d0a32.jpg\";"],"sourceRoot":""}