使用react-image-crop裁剪后显示黑色图片的问题解决问询

问题根源 #

1. 你在getCroppedImg里新建的image元素既没设置图片源，也没等待加载完成就直接调用drawImage，此时图像为空，画布自然显示黑色。
2. 你已经通过ReactCrop的onLoad把加载完成的图片实例存在了image状态里，完全不需要重新创建新的图像元素。
3. 额外问题：ReactCrop组件内部不需要手动嵌套<img>标签，组件会自动渲染传入的src图片，嵌套的img可能导致布局或裁剪计算异常。

修正后的完整代码 #

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

function ImageCropDemo() {
  const [srcImg, setSrcImg] = useState(null);
  const [image, setImage] = useState(null);
  const [crop, setCrop] = useState({ aspect: 16 / 9 });
  const [result, setResult] = useState(null);

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

  function getCroppedImg() {
    // 增加安全判断，避免无效参数报错
    if (!image || !crop.width || !crop.height) return;

    const canvas = document.createElement("canvas");
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext("2d");

    // 计算正确的裁剪坐标与尺寸（基于原图真实分辨率）
    const cropX = crop.x * scaleX;
    const cropY = crop.y * scaleY;
    const cropWidth = crop.width * scaleX;
    const cropHeight = crop.height * scaleY;

    ctx.drawImage(
      image,
      cropX,
      cropY,
      cropWidth,
      cropHeight,
      0,
      0,
      crop.width,
      crop.height
    );

    const base64Image = canvas.toDataURL("image/jpeg", 1);
    setResult(base64Image);
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImage} />
      {srcImg && (
        <div>
          {/* 移除内部嵌套的img标签，ReactCrop会自动渲染图片 */}
          <ReactCrop 
            src={srcImg} 
            onLoad={setImage} 
            crop={crop} 
            onChange={(newCrop) => setCrop(newCrop)}
          />
          <button className="cropButton" onClick={getCroppedImg}>裁剪</button>
        </div>
      )}
      {result && (
        <div>
          <h3>裁剪结果</h3>
          <img src={result} alt="cropped image" style={{ maxWidth: '100%' }} />
        </div>
      )}
    </div>
  );
}

export default ImageCropDemo;

关键修改说明 #

1. 复用已加载的图片实例：直接使用state中ReactCrop的onLoad回调返回的image，确保图像已完全加载。
2. 增加参数校验：在裁剪函数开头判断必要参数是否有效，避免控制台报错。
3. 移除冗余标签：删除ReactCrop内部嵌套的<img>，避免裁剪逻辑冲突。
4. 修复语法错误：移除原代码中result区块里多余的=符号。

可选：实现动态裁剪预览 #

如果需要实时预览裁剪效果，无需点击按钮，可修改crop的变更回调，实时生成预览图：

// 新增预览相关状态
const [previewUrl, setPreviewUrl] = useState(null);

// 替换原有的onChange回调
const handleCropChange = (newCrop) => {
  setCrop(newCrop);
  if (!image || !newCrop.width || !newCrop.height) return;

  const canvas = document.createElement("canvas");
  const scaleX = image.naturalWidth / image.width;
  const scaleY = image.naturalHeight / image.height;
  canvas.width = newCrop.width;
  canvas.height = newCrop.height;
  const ctx = canvas.getContext("2d");

  ctx.drawImage(
    image,
    newCrop.x * scaleX,
    newCrop.y * scaleY,
    newCrop.width * scaleX,
    newCrop.height * scaleY,
    0,
    0,
    newCrop.width,
    newCrop.height
  );

  setPreviewUrl(canvas.toDataURL("image/jpeg", 0.8));
};

// 修改ReactCrop的onChange属性
<ReactCrop 
  src={srcImg} 
  onLoad={setImage} 
  crop={crop} 
  onChange={handleCropChange}
/>

// 在return中添加预览区域
{previewUrl && (
  <div style={{ marginTop: '20px' }}>
    <h3>实时预览</h3>
    <img src={previewUrl} alt="crop preview" style={{ maxWidth: '100%' }} />
  </div>
)}

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