如何在react-avatar-edit中将裁剪图像设为方形而非圆形

我正在使用react-avatar-edit组件，允许用户在将图片保存到数据库前进行裁剪操作。目前该组件仅支持圆形裁剪，导致上传的图片为圆形，但我需要实现方形裁剪。我在官方文档中未找到对应的配置属性，请问是否有人实现过这个需求？

当前使用的代码： #

import Avatar from "react-avatar-edit";
import { useState } from "react";

function App() {
  const [preview, setPreview] = useState(null);
  function onClose() {
    setPreview(null);
  }
  function onCrop(pv) {
    setPreview(pv);
  }
  function onBeforeFileLoad(elem) {
    if (elem.target.files[0].size > 71680) {
      alert("File is too big!");
      elem.target.value = "";
    }
  }
  return (
    <div>
      <Avatar
        width={300}
        height={300}
        onCrop={onCrop}
        onClose={onClose}
        onBeforeFileLoad={onBeforeFileLoad}
        src={null}
      />
      {preview && <img src={preview} alt="Preview" />}
    </div>
  );
}
export default App;

当前效果截图： #

解决方案： #

因为react-avatar-edit本身没有提供方形裁剪的配置项，这里提供几种可行的实现方式：

1. 自定义裁剪逻辑（推荐，稳定性高）

放弃组件自带的圆形裁剪输出，利用canvas手动处理方形裁剪：

import Avatar from "react-avatar-edit";
import { useState, useRef } from "react";

function App() {
  const [preview, setPreview] = useState(null);
  const avatarRef = useRef(null);

  function onClose() {
    setPreview(null);
  }

  function onCrop() {
    // 获取组件内部的图片和裁剪参数
    const { image, crop } = avatarRef.current.getImage();
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // 取裁剪区域宽高中的较小值，保证裁剪结果为方形
    const squareSize = Math.min(crop.width, crop.height);
    canvas.width = squareSize;
    canvas.height = squareSize;

    // 在画布上绘制方形裁剪区域
    ctx.drawImage(
      image,
      crop.x, crop.y, crop.width, crop.height,
      0, 0, squareSize, squareSize
    );
    
    // 生成方形预览图
    setPreview(canvas.toDataURL());
  }

  function onBeforeFileLoad(elem) {
    if (elem.target.files[0].size > 71680) {
      alert("File is too big!");
      elem.target.value = "";
    }
  }

  return (
    <div>
      <Avatar
        ref={avatarRef}
        width={300}
        height={300}
        onCrop={onCrop}
        onClose={onClose}
        onBeforeFileLoad={onBeforeFileLoad}
        src={null}
      />
      {preview && <img src={preview} alt="方形预览" style={{borderRadius: 0}} />}
    </div>
  );
}
export default App;

2. 修改组件内部样式（不推荐，易受版本更新影响）

如果项目依赖的组件版本稳定，可以直接修改组件的CSS样式：

• 找到组件内部的裁剪遮罩类名（如.react-avatar-edit__cropper）
• 将border-radius: 50%改为border-radius: 0，同时调整遮罩层的形状为方形

3. 替换为更灵活的裁剪组件

如果以上方案都不适用，可以考虑替换为原生支持多种裁剪形状的组件，比如react-image-crop或cropperjs，这类组件提供了更丰富的配置项。

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