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?
JavaScript
x
32
32
1
import Avatar from "react-avatar-edit";
2
3
function App() {
4
const [preview, setPreview] = useState(null);
5
function onClose() {
6
setPreview(null);
7
}
8
function onCrop(pv) {
9
setPreview(pv);
10
}
11
function onBeforeFileLoad(elem) {
12
if (elem.target.files[0].size > 71680) {
13
alert("File is too big!");
14
elem.target.value = "";
15
}
16
}
17
return (
18
<div>
19
<Avatar
20
width={300}
21
height={300}
22
onCrop={onCrop}
23
onClose={onClose}
24
onBeforeFileLoad={onBeforeFileLoad}
25
src={null}
26
/>
27
{preview && <img src={preview} alt="Preview" />}
28
</div>
29
);
30
}
31
export default App;
32
Screenshot showing the circular preview. I want square one
Advertisement
Answer
Adding exportSize={500} eventually solved it for me like so:
JavaScript
1
11
11
1
<Avatar
2
exportAsSquare
3
exportSize={500}
4
width={300}
5
height={300}
6
onCrop={onCrop}
7
onClose={onClose}
8
onBeforeFileLoad={onBeforeFileLoad}
9
src={null}
10
/>
11