无法使用 react-image-crop 裁剪图像答案

【问题标题】：Cannot crop image using react-image-crop无法使用 react-image-crop 裁剪图像
【发布时间】：2020-05-31 11:32:15
【问题描述】：

我尝试使用 react-image-crop (https://www.npmjs.com/package/react-image-crop/v/6.0.7) 裁剪图像。实际上我无法移动裁剪区域或拉伸它。我也使用 React DragZone 上传图片。你能解释一下我做错了什么以及可能是什么问题吗？ React-image-crop 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>
  )
}

【问题讨论】：

标签： reactjs jsx image-uploading crop

【解决方案1】：

我也面临同样的问题，在这里您尝试在裁剪属性中添加 disabled,locked 但它无效，因为裁剪属性采用以下值：

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

为了解决这个添加禁用，锁定为组件中的道具而不是裁剪属性。

【讨论】：

【解决方案2】：

我不确定您为什么要在函数内执行ReactDom.render。这似乎与 React 是什么相反，并猜测该库没有正确绑定事件。

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

这是创作者本人的一个工作示例：https://codesandbox.io/s/72py4jlll6

【讨论】：