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