simple-image-cropper/lib/index.js


"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "Avatar", {
  enumerable: true,
  get: function get() {
    return _Avatar["default"];
  }
});
Object.defineProperty(exports, "ZoomSlider", {
  enumerable: true,
  get: function get() {
    return _ZoomSlider["default"];
  }
});
exports.withCropper = withCropper;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Avatar = _interopRequireDefault(require("./Avatar"));

var _ZoomSlider = _interopRequireDefault(require("./ZoomSlider"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function withCropper(cb) {
  var Cropper = /*#__PURE__*/function (_React$Component) {
    _inherits(Cropper, _React$Component);

    var _super = _createSuper(Cropper);

    function Cropper(props) {
      var _this;

      _classCallCheck(this, Cropper);

      _this = _super.call(this, props);
      _this.state = {
        left: 0,
        top: 0,
        zoom: 1,
        dimensions: {
          imageWidth: "auto",
          imageHeight: "auto"
        }
      };
      _this.imageRef = /*#__PURE__*/_react["default"].createRef();
      _this.canvasRef = /*#__PURE__*/_react["default"].createRef();
      _this.hiddenCanvasRef = /*#__PURE__*/_react["default"].createRef();
      _this.onZoomValueChange = _this.onZoomValueChange.bind(_assertThisInitialized(_this));
      _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
      _this.handleMove = _this.handleMove.bind(_assertThisInitialized(_this));
      _this.onSave = _this.onSave.bind(_assertThisInitialized(_this));
      return _this;
    }

    _createClass(Cropper, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        var image = this.imageRef.current;

        image.onload = function () {
          var _image$getBoundingCli = image.getBoundingClientRect(),
              offsetWidth = _image$getBoundingCli.width,
              offsetHeight = _image$getBoundingCli.height;

          var _this$props = this.props,
              width = _this$props.width,
              height = _this$props.height;
          var imageWidth, imageHeight;
          var left = 0;
          var top = 0;

          if (offsetWidth < offsetHeight) {
            imageWidth = width;
            imageHeight = offsetHeight * imageWidth / offsetWidth;

            if (imageHeight < height) {
              imageHeight = height;
              imageWidth = offsetWidth * imageHeight / offsetHeight;
            }

            top = -1 * (imageHeight - height) / 2;
          } else if (offsetHeight < offsetWidth) {
            imageHeight = height;
            imageWidth = offsetWidth * imageHeight / offsetHeight;

            if (imageWidth < width) {
              imageWidth = width;
              imageHeight = offsetHeight * imageWidth / offsetWidth;
            }

            left = -1 * (imageWidth - width) / 2;
          } else {
            imageWidth = width;
            imageHeight = height;
          }

          this.setState({
            left: left,
            top: top,
            dimensions: {
              imageWidth: imageWidth,
              imageHeight: imageHeight
            }
          });
        };

        image.onload = image.onload.bind(this);
      }
    }, {
      key: "onZoomValueChange",
      value: function onZoomValueChange(e) {
        var newZoomValue = e.target.value;
        var _this$props2 = this.props,
            height = _this$props2.height,
            width = _this$props2.width,
            url = _this$props2.url;
        var _this$state = this.state,
            zoom = _this$state.zoom,
            left = _this$state.left,
            top = _this$state.top,
            dimensions = _this$state.dimensions;
        var imageWidth = dimensions.imageWidth,
            imageHeight = dimensions.imageHeight;
        var newLeft = -1 * ((Math.abs(left) + width / 2) * 100 / (imageWidth * zoom) * (imageWidth * newZoomValue) / 100 - width / 2);
        var newTop = -1 * ((Math.abs(top) + height / 2) * 100 / (imageHeight * zoom) * (imageHeight * newZoomValue) / 100 - height / 2);

        if (newLeft > 0) {
          newLeft = 0;
        }

        if (newTop > 0) {
          newTop = 0;
        }

        if (Math.abs(newLeft) > Math.abs(imageWidth * newZoomValue - width)) {
          newLeft = -1 * (imageWidth * newZoomValue - width);
        }

        if (Math.abs(newTop) > Math.abs(imageHeight * newZoomValue - height)) {
          newTop = -1 * (imageHeight * newZoomValue - height);
        }

        this.setState({
          zoom: newZoomValue,
          left: newLeft,
          top: newTop
        });
      }
    }, {
      key: "onSave",
      value: function onSave() {
        var _this$props3 = this.props,
            height = _this$props3.height,
            width = _this$props3.width,
            url = _this$props3.url;
        var _this$state2 = this.state,
            left = _this$state2.left,
            top = _this$state2.top;
        var imageObj = new Image();
        imageObj.src = url;
        imageObj.setAttribute('crossorigin', "anonymous");

        imageObj.onload = function () {
          var canvas = this.canvasRef.current;
          var context = canvas.getContext('2d');

          var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
              sourceWidth = _canvas$getBoundingCl.width,
              sourceHeight = _canvas$getBoundingCl.height;

          context.drawImage(imageObj, 0, 0, sourceWidth, sourceHeight);
          var hiddenCanvas = this.hiddenCanvasRef.current;
          var hiddenContext = hiddenCanvas.getContext('2d');
          hiddenContext.drawImage(canvas, Math.abs(left), Math.abs(top), width, height, 0, 0, width, height);
          this.props.onSave(hiddenCanvas.toDataURL());
        };

        imageObj.onload = imageObj.onload.bind(this);
      }
    }, {
      key: "handleMove",
      value: function handleMove(e) {
        var _this$state3 = this.state,
            left = _this$state3.left,
            top = _this$state3.top,
            zoom = _this$state3.zoom,
            dimensions = _this$state3.dimensions;
        var _this$props4 = this.props,
            width = _this$props4.width,
            height = _this$props4.height;
        var imageWidth = dimensions.imageWidth,
            imageHeight = dimensions.imageHeight;
        var directionX = e.movementX;
        var directionY = e.movementY;
        var newLeft = left + directionX;
        var newTop = top + directionY;

        if (newLeft > 0) {
          newLeft = 0;
        } else if (Math.abs(newLeft) > imageWidth * zoom - width) {
          newLeft = -1 * (imageWidth * zoom - width);
        }

        if (newTop > 0) {
          newTop = 0;
        } else if (Math.abs(newTop) > imageHeight * zoom - height) {
          newTop = -1 * (imageHeight * zoom - height);
        }

        this.setState({
          left: newLeft,
          top: newTop
        });
      }
    }, {
      key: "onMouseDown",
      value: function onMouseDown(e) {
        var _this2 = this;

        e.target.addEventListener('mousemove', this.handleMove);

        var removeEventHandler = function removeEventHandler() {
          e.target.removeEventListener('mousemove', _this2.handleMove);
          document.removeEventListener('mouseup', removeEventHandler);
        };

        document.addEventListener('mouseup', removeEventHandler);
      }
    }, {
      key: "onTouchStart",
      value: function onTouchStart(e) {
        var _this3 = this;

        e.target.addEventListener('touchmove', this.handleMove);

        var removeEventHandler = function removeEventHandler() {
          e.target.removeEventListener('touchmove', _this3.handleMove);
          document.removeEventListener('touchend', removeEventHandler);
        };

        document.addEventListener('touchend', removeEventHandler);
      }
    }, {
      key: "render",
      value: function render() {
        var _this$state4 = this.state,
            top = _this$state4.top,
            left = _this$state4.left,
            zoom = _this$state4.zoom,
            dimensions = _this$state4.dimensions;
        var _this$props5 = this.props,
            url = _this$props5.url,
            width = _this$props5.width,
            height = _this$props5.height;
        var avatarProps = {
          top: top,
          left: left,
          zoom: zoom,
          dimensions: dimensions,
          url: url,
          width: width,
          height: height,
          imageRef: this.imageRef,
          canvasRef: this.canvasRef,
          hiddenCanvasRef: this.hiddenCanvasRef,
          onMouseDown: this.onMouseDown,
          onTouchStart: this.onTouchStart
        };
        var zoomSliderProps = {
          zoom: zoom,
          onZoomValueChange: this.onZoomValueChange
        };
        return cb({
          avatarProps: avatarProps,
          zoomSliderProps: zoomSliderProps,
          onSave: this.onSave,
          onCancel: this.props.onCancel
        });
      }
    }]);

    return Cropper;
  }(_react["default"].Component);

  Cropper.propTypes = {
    width: _propTypes["default"].number.isRequired,
    height: _propTypes["default"].number.isRequired,
    url: _propTypes["default"].string.isRequired,
    onCancel: _propTypes["default"].func,
    onSave: _propTypes["default"].func.isRequired
  };
  return Cropper;
}