React-cropper - 裁剪框超出图片范围

Question

我正在使用最新的cropper.js react包react-cropper来完成我的项目，但我无从下手。问题是裁剪区域可能超出图像范围，这不应该发生。我已经尝试了我能想到的一切方法。

以下是在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的噩梦，但我不能使用state，因为它会重置整个裁剪器。我还从图像标签中获取canvasData，因为在这个React包中，cropper.canvasData()函数无法正常工作。

在上面的代码中，React能够检测到裁剪区域超出了图像范围，但我不知道该怎么做。我尝试将裁剪区域的位置设置为第一个超出图像范围的位置。但数据并没有改变。

- Jan Jiráň

---

请阅读在什么情况下我可以在我的问题中添加“紧急”或其他类似短语，以便获得更快的答案？ - 总结是这不是与志愿者沟通的理想方式，可能会适得其反，导致不能获得答案。请不要在您的问题中添加此类短语。 - halfer

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} <-----
    />

并且它会正常工作。

- Jan Jiráň