react-image-crop图片裁剪缩放异常问题求助

你的推测完全正确——问题出在图片显示时被缩放，而你直接用了基于显示尺寸的裁剪坐标去处理原图，导致裁剪区域错位。以下是修复步骤和完整代码：

核心问题分析 #

你给img标签设置了style={{ height: "600px" }}，图片会被等比缩放以适应这个高度。但react-image-crop返回的crop对象里的x/y/width/height都是基于显示后的图片尺寸，不是原图的真实尺寸。直接用这些值去绘制原图，自然会对应不上。

修复方案 #

1. 获取原图真实尺寸：通过img元素的naturalWidth和naturalHeight属性获取原图的宽高（不是clientWidth/clientHeight）
2. 计算缩放比例：分别计算宽和高的缩放比例（原图尺寸 / 显示尺寸）
3. 转换裁剪坐标：把显示尺寸下的crop参数，乘以对应比例得到原图上的真实坐标和宽高
4. 修正drawImage参数：用转换后的真实值来绘制裁剪区域

修复后的完整代码 #

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

export default function ImageUploader(props) {
  const [imgSrc, setImgSrc] = useState();
  const [crop, setCrop] = useState();
  const [originalImageSize, setOriginalImageSize] = useState(null); // 存原图真实尺寸
  const imgRef = useRef(null);

  const handleImage = async (event) => {
    setImgSrc(URL.createObjectURL(event.target.files[0]));
  };

  const getCroppedImg = async (image, pixelCrop) => {
    try {
      // 计算缩放比例：原图尺寸 / 显示尺寸
      const scaleX = image.naturalWidth / image.clientWidth;
      const scaleY = image.naturalHeight / image.clientHeight;

      // 转换为原图真实的裁剪坐标和宽高
      const realCrop = {
        x: pixelCrop.x * scaleX,
        y: pixelCrop.y * scaleY,
        width: pixelCrop.width * scaleX,
        height: pixelCrop.height * scaleY,
      };

      const canvas = document.createElement("canvas");
      canvas.width = realCrop.width;
      canvas.height = realCrop.height;
      const ctx = canvas.getContext("2d");

      ctx.drawImage(
        image,
        realCrop.x,
        realCrop.y,
        realCrop.width,
        realCrop.height,
        0,
        0,
        realCrop.width,
        realCrop.height
      );

      const base64Image = canvas.toDataURL("image/jpeg", 1);
      props.setCurrentImages(pushImage(props.images, base64Image));
    } catch (e) {
      console.log(e);
    }
  };

  // 修正拼写错误：lengh → length
  function pushImage(array, newImage) {
    if (array.length === 0) return [newImage];
    return [...array, newImage];
  }

  function handleCropButton() {
    if (!crop) return; // 加个判断，避免未选择裁剪区域时出错
    getCroppedImg(imgRef.current, crop);
    props.setUploadImg(false);
  }

  return (
    <div style={{ height: "600px" }}>
      <div>
        <input type="file" onChange={handleImage} accept="image/*" />
        <button onClick={handleCropButton}>Crop</button>
      </div>

      <ReactCrop
        crop={crop}
        aspect={1}
        onChange={(c) => setCrop(c)}
        onComplete={(crop) => setCrop(crop)}
      >
        <img
          src={imgSrc}
          alt=""
          style={{ height: "600px" }}
          onLoad={() => {
            // 存储原图真实尺寸
            setOriginalImageSize({
              width: imgRef.current.naturalWidth,
              height: imgRef.current.naturalHeight,
            });
          }}
          ref={imgRef}
        />
      </ReactCrop>
    </div>
  );
}

额外优化点 #

• 给handleCropButton加了if (!crop)判断，避免用户未选择裁剪区域就点击按钮导致报错
• 修正了pushImage里的拼写错误lengh→length，之前的代码会导致空数组判断失效

内容的提问来源于stack exchange，提问作者Slowcode_beef