React-cropper - cropBox находится вне изображения

Question

В моем текущем проекте я использую последний реактивный пакет cropper.js Reaction-cropper, и я просто потерян. Проблема в том, что область обрезки может выходить за пределы изображения, чего не должно быть. Я перепробовал все, что мог придумать.

Вот метод _crop, который вызывается при каждом изменении кроппера.

componentDidMount = () => {
    sessionStorage.setItem('shouldMove', false)
  }

_crop = ( e ) => {
    var canvasData = document.getElementsByClassName('cropper-hidden') 
    [0].cropper.canvasData
    var cropBoxData = this.refs.cropper.getCropBoxData();

    if ( sessionStorage.getItem('shouldMove') === 'false' ) {
      sessionStorage.setItem( 'currentLeft', cropBoxData.left )
      sessionStorage.setItem( 'currentTop', cropBoxData.top )
      sessionStorage.setItem('shouldMove', true)
    }else {
      if (
        cropBoxData.left <= canvasData.left ||
        cropBoxData.top  <= canvasData.top  ||
        cropBoxData.left + cropBoxData.width > canvasData.width + 
        canvasData.left ||
        cropBoxData.top + cropBoxData.height > canvasData.height + 
        canvasData.top
      ) {
        cropBoxData.left = sessionStorage.getItem( 'currentLeft' )
        cropBoxData.top = sessionStorage.getItem( 'currentTop' )
      }
    }}

//render

    <Cropper
      ref='cropper'
      src={URL.createObjectURL(this.props.image)}
      aspectRatio={this.props.template.aspect_ratio}
      guides={true}
      zoomTo={ this.state.zoomValue }
      dragMode="move"
      crop={this._crop}
    />

Я знаю, что это кошмарный сеанс sessionStorage, но я не могу использовать состояние, потому что это приведет к сбросу всего кроппера. Я также получаю canvasData из тега image, потому что функция cropper.canvasData() не работает в этом реактивном пакете.

В моем коде выше, Response может обнаружить, что область кадрирования находится за пределами изображения, но я не знаю, что мне там делать. Я попытался установить положение области обрезки в первую позицию, где она находится за пределами изображения. Но данные не меняются.

Answer 1

Вот это да. хорошо, если кто-то будет бороться с той же проблемой, ответ довольно прост, но я действительно не мог найти его нигде. Просто установите viewMode на "2", например, так:

<Cropper
      ref='cropper'
      src={this.props.image}
      aspectRatio={ar}
      guides={true}
      zoomTo={ this.state.zoomValue }
      dragMode="move"
      crop={this._crop}
      viewMode = {2} <-----
    />

и это будет работать.