I'm using this library https://github.com/kirill3333/react-avatar
There is a method onBeforeFileLoad()
in which the size of the image is checked. Later the selected photo will be saved in preview
. My question is, how do I get the normal photo that the user has selected - that is, the photo that he has not yet cropped?
import React, { useState } from "react";
import ReactDOM from "react-dom";
import Avatar from "react-avatar-edit";
const App = () => {
const [preview, setPreview] = useState(null);
const [src, setSrc] = useState("./example/einshtein.jpg");
const onClose = () => {
setPreview(null);
};
const onCrop = (preview) => {
setPreview(preview);
};
const onBeforeFileLoad = (elem) => {
if (elem.target.files[0].size > 71680) {
alert("File is too big!");
elem.target.value = "";
}
else {
// ToDo
// get the normale photo
}
};
return (
<div>
<Avatar
width={390}
height={295}
onCrop={onCrop}
onClose={onClose}
onBeforeFileLoad={onBeforeFileLoad}
src={src}
/>
<img src={preview} alt="Preview" />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
Its in your "src" state.
According to documentation of the package you are using; onImageLoad(image)
will return you the loaded image.
You can also use your onBeforeFileLoad
function. And set it to a <img src={original}>
element for example.
const onBeforeFileLoad = (elem) => {
....
else {
setOriginal(elem.target.files[0])
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.