Question

我在当前项目中使用的是最新的cropper.js react软件包react-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，因为它将重置整个裁剪器。我也从image标签中获取canvasData，因为 cropper.canvasData（）函数在此react包中不起作用。

在上面的代码中，react能够检测到裁剪区域在图像之外，但是我不知道该怎么做。我试图将裁剪区域的位置设置为图像外部的第一个位置。但是数据没有改变。

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

它将起作用。

React-cropper-cropBox超出图像

1 个答案: