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
Advertisement
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} />