Javascript 调整大小后显示小画布

我正在努力学习如何反应，遇到了一些我两天都没能解决的问题

我上传了一张图片并将其显示在网站上。效果很好。 现在我想裁剪它并显示裁剪后的版本。没有按预期工作

它在下面的画布上显示了一些东西，但不是我想要的

如前所述，我们已在互联网上搜索解决方案

<ReactCrop 
    src={imgSrc} 
    crop={this.state.crop} 
    onImageLoaded = {this.handleImageLoaded}
    onComplete = {this.handleOnCropComplete}
    onChange={this.handleOnCropChange} />
    <br />
    <p>Preview canvas</p>
    <img src={this.imagePreviewCanvasRef} alt={this.imagePreviewCanvasRef} />

    <canvas ref={this.imagePreviewCanvasRef} width={1100} height={1100}></canvas>

</div>

预览画布

{（{getRootProps，getInputProps}）=>(
将一些文件拖放到此处，或单击以选择文件

)}

---

我想显示完全裁剪的文件，但现在我得到了一个小画布，其中裁剪了图像的错误部分。

Hi，这是什么。state.crop？

<Dropzone onDrop={this.handleOnDrop}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()} className='123123'>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>

  )}
</Dropzone>