Невозможно обрезать изображение, используя ответ-изображение-обрезать - PullRequest
Новая
       13

Невозможно обрезать изображение, используя ответ-изображение-обрезать

2 голосов
/ 16 февраля 2020

Я пытаюсь обрезать изображение с помощьюact-image-crop (https://www.npmjs.com/package/react-image-crop/v/6.0.7). На самом деле я не могу сдвинуть обрезанную область или растянуть ее. Я также использую React DragZone для загрузки изображения. Не могли бы вы объяснить, что я делаю неправильно и в чем может быть проблема? React-image-crop css также импортируется. Кто-нибудь может помочь?

This cropped area do not move and do not resizeble

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

1 Ответ

0 голосов
/ 20 апреля 2020

Я не уверен, почему вы должны сделать ReactDom.render из функции. Кажется, это противоречит тому, что такое React, и предполагает, что библиотека не связывает события должным образом.

Я бы посоветовал после того, как пользователь уронит изображение, вы загрузите изображение с помощью программы чтения файлов, установите его в качестве состояния и измените отображение, чтобы отобразить <ReactCrop src=={this.state.img} />. crop также должен находиться в состоянии, поэтому при изменении он обновляет прямоугольник кадрирования.

Вот рабочий пример от самого создателя: https://codesandbox.io/s/72py4jlll6

...