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

Question

我正在尝试使用 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>
  )
}

Answer 1

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

我建议，在用户放下图像后，您使用文件 reader 加载图像并将其设置为状态并更改显示以显示 <ReactCrop src=={this.state.img} />。 crop 还需要处于一种状态，以便在它发生变化时更新裁剪矩形。

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

Answer 2

我也面临同样的问题，这里你试图在crop 属性中添加disabled, locked但是它是无效的，因为crop 属性需要以下值：

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

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

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

Cannot crop image using react-image-crop

reactjs

jsx

image-uploading

crop