使用react裁剪图像 - 自定义react-easy-crop样式

Question

我正在尝试制作一个非常简单的反应组件，可以使用react-easy-crop裁剪图像。显然，可以使用

style

属性自定义 React-easy-crop 模块的样式，该属性需要 3 个对象：

containerStyle

、

mediaStyle

和

cropAreaStyle

。

这是默认布局：

我想将cropArea扩展到其容器的整个宽度，并按高度将媒体放入其中（这样我们就看不到cropArea之外的原始图像部分），但不知道该怎么做。 CropAreaStyle 对象似乎不会影响宽度或高度，因为它是计算并注入到模块文件中的（即使在将

disableAutomaticStylesInjection

设置为 true 后）。

import React from 'react'
import ReactDOM from 'react-dom'
import Cropper from 'react-easy-crop'
import './styles.css'

class App extends React.Component {
  state = {
    imageSrc:
      'https://img.huffingtonpost.com/asset/5ab4d4ac2000007d06eb2c56.jpeg?cache=sih0jwle4e&ops=1910_1000',
    crop: { x: 0, y: 0 },
    zoom: 1,
    aspect: 1 / 1,
    style: {  containerStyle: { position: "absolute", top: "0", width: "calc(100% - 2px)", height: window.innerWidth, overflow: "hidden", border: "1px solid black" }, 
              mediaStyle: { height: "100%", display: "block" }, 
              cropAreaStyle: {position: "absolute", top: "0", border: "1px solid black", width: "100%", height: "100%" }}
  }

  onCropChange = (crop) => {
    this.setState({ crop })
  }

  onCropComplete = (croppedArea, croppedAreaPixels) => {
    console.log(croppedArea, croppedAreaPixels)
  }

  onZoomChange = (zoom) => {
    this.setState({ zoom })
  }

  render() {
    return (
      <div className="App">
        <div className="crop-container">
          <Cropper
            image={this.state.imageSrc}
            crop={this.state.crop}
            zoom={this.state.zoom}
            aspect={this.state.aspect}
            onCropChange={this.onCropChange}
            onCropComplete={this.onCropComplete}
            onZoomChange={this.onZoomChange}
            style={this.state.style}
            disableAutomaticStylesInjection={true}
          />
        </div>
      </div>
    )
  }
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

这就是我想要实现的目标：

黑色方块是cropArea，我无法调整大小...

我希望cropArea保持正方形。

有没有一种简单的方法可以做到这一点，而不需要更改模块文件？

使用其他模块的解决方案也是可以接受的

提前致谢

Answer 1

我尝试使用对象

cropAreaStyle

但它不起作用，而是使用道具

cropSize

并且不要传递道具

aspect

。

为了获取媒体的高度，请传递 onMediaLoaded 属性：

onMediaLoad = (mediaSize) => {
    this.setState({
      cropHeight: mediaSize.height,
    });
  };

应用程序.js

import React from 'react';
import ReactDOM from 'react-dom';
import Cropper from 'react-easy-crop';
import './style.css';

class App extends React.Component {
  state = {
    imageSrc:
      'https://img.huffingtonpost.com/asset/5ab4d4ac2000007d06eb2c56.jpeg?cache=sih0jwle4e&ops=1910_1000',
    crop: { x: 0, y: 0 },
    zoom: 1,
    cropHeight: 0,
  };

  onCropChange = (crop) => {
    this.setState({ crop });
  };

  onCropComplete = (croppedArea, croppedAreaPixels) => {
    console.log(croppedArea, croppedAreaPixels);
  };

  onZoomChange = (zoom) => {
    this.setState({ zoom });
  };

  onMediaLoad = (mediaSize) => {
    this.setState({
      cropHeight: mediaSize.height,
    });
  };

  render() {
    const cropSize = {
      height: `${this.state.cropHeight}px`,
      width: '100%',
    };

    return (
      <div className="App">
        <div className="crop-container">
          <Cropper
            image={this.state.imageSrc}
            crop={this.state.crop}
            zoom={this.state.zoom}
            onCropChange={this.onCropChange}
            onCropComplete={this.onCropComplete}
            onZoomChange={this.onZoomChange}
            onMediaLoaded={this.onMediaLoad}
            cropSize={cropSize}
          />
        </div>
      </div>
    );
  }
}

export default App;

演示：https://stackblitz.com/edit/react-4zmgud

Answer 2

看来您需要的是将

objectFit

属性设置为

vertical-cover

。

请参阅此演示：https://codesandbox.io/s/crazy-liskov-04u7m0

Answer 3

抱歉，可能会晚一点，但您可以做的是设置相对于裁剪器父元素的位置，然后设置裁剪器将采用的父元素的宽度和高度