reactjs - 将裁剪图像反应到特定的裁剪尺寸

Question

我正在尝试通过使用react-image-crop库来裁剪图像，并且裁剪功能正常工作。

import React, { useCallback, useRef, useState } from "react";
import ReactCrop, { Crop } from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

export const ImageCropper = () => {
  const [upImg, setUpImg] = useState<string>(
    "https://www.vintagemovieposters.co.uk/wp-content/uploads/2020/04/IMG_5274-scaled.jpeg"
  );
  const imgRef = useRef<HTMLImageElement | null>(null);
  const [crop, setCrop] = useState<Partial<Crop>>({
    unit: "%",
    aspect: 0.68,
    height: 100
  });

  const onLoad: (image: HTMLImageElement) => boolean | void = useCallback(
    (img) => {
      imgRef.current = img;

      const aspect = 0.68;

      const width =
        img.width / aspect < img.height * aspect
          ? 100
          : ((img.height * aspect) / img.width) * 100;
      const height =
        img.width / aspect > img.height * aspect
          ? 100
          : (img.width / aspect / img.height) * 100;
      const y = (100 - height) / 2;
      const x = (100 - width) / 2;

      setCrop({
        unit: "%",
        width,
        height,
        x,
        y,
        aspect
      });
    },
    []
  );

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <ReactCrop
        src={upImg}
        onImageLoaded={onLoad}
        crop={crop}
        onChange={(crop, percentageCrop) => {
          setCrop(percentageCrop);
        }}
        keepSelection={true}
      />
      <div
        style={{
          width: imgRef.current?.width! * (crop.width! / 100),
          height: imgRef.current?.height! * (crop.height! / 100),
          overflow: "hidden"
        }}
      >
        <img
          alt="cropped_image"
          src={upImg}
          style={{
            width: imgRef.current?.width!,
            height: imgRef.current?.height!,
            transform: `translate(-${
              (crop.x! / 100) * imgRef.current?.width!
            }px, -${(crop.y! / 100) * imgRef.current?.height!}px )`
          }}
        />
      </div>
    </div>
  );
};

但是，我想要实现的是：

• 裁剪后保留原始图像
• 将图像放在具有特定尺寸（235px x 346px）的预览 div 中
• 转换图像以适应具有相同定义裁剪的预览 div
• 确保预览 div 与突出显示的裁剪相匹配

我尝试的是上面的代码，但它的问题是宽度+高度动态变化。

我尝试使用固定的宽度和高度值，但裁剪已关闭。我也尝试scale在转换中使用该属性，但它也关闭了：

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <ReactCrop
        src={upImg}
        onImageLoaded={onLoad}
        crop={crop}
        onChange={(crop, percentageCrop) => {
          console.log("percent", percentageCrop);
          setCrop(percentageCrop);
        }}
        keepSelection={true}
      />
      <div
        style={{
          width: 235,
          height: 346,
          overflow: "hidden"
        }}
      >
        <img
          alt="cropped_image"
          src={upImg}
          style={{
            width: imgRef.current?.width!,
            height: imgRef.current?.height!,
            transform: `translate(-${
              (crop.x! / 100) * imgRef.current?.width!
            }px, -${(crop.y! / 100) * imgRef.current?.height!}px) scale(${
              crop.width/100
            }, ${crop.height/100})`
          }}
        />
      </div>
    </div>
  );

我需要弄清楚如何将它们限制为（235px x 346px），并“缩放”图像以匹配来自react-image-crop.

我怎样才能做到这一点？

代码沙箱中的示例