How to make the cropped image to be square instead…

I am using react-avatar-edit to allow a user crop their images before saving to database. It only shows a circular crop thereby making the uploaded images circular but I want to have a rectanglar crop. I can’t seem to find a prop for that in the documentation. Please has anyone achieved that yet?

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

Answer

Adding exportSize={500} eventually solved it for me like so:

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

How to make the cropped image to be square instead of circular in react-avatar-edit

Advertisement

Answer