不能使用反应-图像裁剪来裁剪图像

Question

我试图使用反应-图像裁剪(https://www.npmjs.com/package/react-image-crop/v/6.0.7)来裁剪图像.实际上，我不能移动种植面积或拉伸它。我也使用那里反应DragZone上传图像。你能解释一下我做错了什么，有什么问题吗？React图像作物css也是导入的。有人能帮忙吗？

​

​

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'
import ReactCrop from 'react-image-crop'
import ReactDOM from "react-dom";
import 'react-image-crop/dist/ReactCrop.css';
import "../Styles/ImageUpload.css"

function ImageUpload(files, addFile) {

  const crop = {
    disabled: false,
    locked: false,
    unit: 'px', // default, can be 'px' or '%'
    x: 130,
    y: 50,
    width: 200,
    height: 200
  }

  const onCrop = (image, pixelCrop, fileName) => { 
  }

  const onImageLoaded = (image) => {
  }

  const onCropComplete = async crop => {
  }

  const onDrop = useCallback((acceptedFiles, rejectedFiles) => {
    if (Object.keys(rejectedFiles).length !== 0) {
    }
    else {
      files.addFile(acceptedFiles);

      let popupBody = document.getElementsByClassName("popup-container")[0];
      popupBody.innerHTML = "";
      let cropElement = (<ReactCrop src = {URL.createObjectURL(acceptedFiles[0])} crop={crop} 
      onImageLoaded={onImageLoaded}
      onComplete={onCropComplete}
      onChange={onCrop} />);

      ReactDOM.render(cropElement, popupBody);

  }, [])

  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop, noKeyboard: true})

  return (
    <div className = "popup-container">
    <p>Upload new photo</p>
    {  
      (() => {
        if (files.length == undefined) {          
          return (<div>
            <input className = "testinput" {...getInputProps()} />
            <div className = "popup-body" {...getRootProps()}> 
              <img src={require("../Resources/upload-image.png")} className = "image-upload-img"/>                        
              <p style = {{'font-family':'Verdana'}}>Chouse a <b className = "file-manualy- 
              upload">file</b> or drag it here</p>      
            </div> </div>)
        } 
        else {
        }
    })()}

    </div>
  )
}

Answer 1

我还面临同样的问题，这里您试图将禁用的、锁定的添加到属性中，但是它是无效的，因为you属性采用以下值：

{
  unit: 'px', // default, can be 'px' or '%'
  x: 130,
  y: 50,
  width: 200,
  height: 200
}

若要解决此问题，请禁用“添加”，将其锁定为组件中的道具，而不是“作物”属性。

Answer 2

我不知道为什么要在函数中执行ReactDom.render。它似乎与什么反应是相反的，并猜测库没有正确地绑定事件。

我建议，在用户删除图像后，使用文件读取器加载图像，并将其设置为状态，并更改显示以显示<ReactCrop src=={this.state.img} />。crop还需要处于状态，以便当它更改时，它会更新裁剪矩形。

下面是一个来自创建者自己的工作示例：https://codesandbox.io/s/72py4jlll6