ReactCrop 使用原始分辨率裁剪图像，而不是使用 CSS 更改分辨率

Question

上传和显示的图像的宽度是通过使用max-width:100%;ReactCrop裁剪原始图像来改变的。我尝试更改图像宽度，使其随容器宽度自动调整，但反应图像裁剪十字线不会适应它，而是根据以前的分辨率裁剪图像。在我附加的图像中，您可以看到裁剪部分的图像没有出现在裁剪预览中。它显示的是原始分辨率的裁剪预览。

import React from "react";

import ReactCrop from "react-image-crop";

import { Button } from "antd";

import "./custom-crop.scss";

import {

  image64toCanvasRef,

  extractImageFileExtensionFromBase64,

  base64StringtoFile,

  downloadBase64File

} from "./reusableUtils";

class ImageUploader extends React.Component {

  constructor(props) {

    super(props);

    this.imagePreviewCanvasRef = React.createRef();

    this.state = {

      isVerified: false,

      imgSrc: null,

      imgSrcExt: null,

      crop: {

        aspect: 1 / 1,

        unit: "px", // default, can be 'px' or '%'

        x: 130,

        y: 50,

        width: 200,

        height: 200

      }

    };

  }

  onChange(e) {

    let currFile = e[0];

    let fileReader = new FileReader();

    fileReader.addEventListener(

      "load",

      () => {

        this.setState({

          imgSrc: fileReader.result

        });

      },

      false

    );

    fileReader.readAsDataURL(currFile);

  }

  handleOnCropChange = crop => {

    this.setState({ crop: crop });

  };

  handleImageLoaded = () => {

    // console.log(image);

  };

  handleOnCropComplete = crop => {

    //console.log(crop, pixelCrop)

    const canvasRef = this.imagePreviewCanvasRef.current;

    const { imgSrc } = this.state;

    // const imageData64 = canvasRef.toDataURL("image/" + fileExtension);

    const fileExtension = extractImageFileExtensionFromBase64(imgSrc);

    const fileName = "profile_pic." + fileExtension;

    const myNewCrop = base64StringtoFile(imgSrc, fileName);

    this.setState({ imgSrcExt: myNewCrop });

    image64toCanvasRef(canvasRef, imgSrc, crop);

  };

Answer 1

使用百分比而不是像素。像这样的东西。 onCropChange={(crop, percentCrop) =>                     this.setState({ crop: percentCrop })                   }