如何在 react-avatar-edit 中使裁剪后的图像为方形而不是圆形答案

【问题标题】：How to make the cropped image to be square instead of circular in react-avatar-edit如何在 react-avatar-edit 中使裁剪后的图像为方形而不是圆形
【发布时间】：2022-12-07 20:53:05
【问题描述】：

我正在使用 react-avatar-edit 来允许用户在保存到数据库之前裁剪他们的图像。它只显示圆形裁剪，从而使上传的图像呈圆形，但我想要矩形裁剪。我似乎无法在文档中找到它的支持。请问有人做到了吗？

import Avatar from "react-avatar-edit";

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;

Screenshot showing the circular preview. I want square one

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

我还搜索了文档，但找不到任何允许方形裁剪的内容，但您可以通过传递保存为方形 exportAsSquare，沙盒链接：https://codesandbox.io/s/winter-glitter-pfgysk?file=/src/App.js

<Avatar
    exportAsSquare
    width={300}
    height={300}
    onCrop={onCrop}
    onClose={onClose}
    onBeforeFileLoad={onBeforeFileLoad}
    src={null}
  />

【讨论】：

谢谢 Dawood，我添加了它，它变得太大了，需要花费很多时间才能添加到数据库中。我也用了exportSize={1000}同样的东西。

【解决方案2】：

添加 exportSize={500} 最终像这样为我解决了它：

<Avatar
    exportAsSquare
    exportSize={500}
    width={300}
    height={300}
    onCrop={onCrop}
    onClose={onClose}
    onBeforeFileLoad={onBeforeFileLoad}
    src={null}
  />

【讨论】：