React cropBox不在图像中

Question

我在当前项目中使用了最新的cropper.js react包react cropper，我只是迷路了。问题是，裁剪区域可能会超出图像，而这不应该。我想的都试过了。

这里是_crop方法，它在cropper中的每次更改时都被调用。

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

我知道这是会话存储的噩梦，但我不能使用状态，因为它会重置整个崩溃。我还从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} <-----
/>

它会起作用的。