我如何获得正常的照片?
How do I get the normal photo?
我正在使用这个库https://github.com/kirill3333/react-avatar
有一种检查图像大小的方法onBeforeFileLoad()
。稍后所选照片将保存在 preview
中。我的问题是,如何获取用户选择的正常照片 - 即他尚未裁剪的照片?
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"));
它处于您的“src”状态。
根据您使用的软件包的文档; onImageLoad(image)
将 return 你加载的图像。
您也可以使用 onBeforeFileLoad
函数。并将其设置为 <img src={original}>
元素,例如
const onBeforeFileLoad = (elem) => {
....
else {
setOriginal(elem.target.files[0])
}
我正在使用这个库https://github.com/kirill3333/react-avatar
有一种检查图像大小的方法onBeforeFileLoad()
。稍后所选照片将保存在 preview
中。我的问题是,如何获取用户选择的正常照片 - 即他尚未裁剪的照片?
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"));
它处于您的“src”状态。
根据您使用的软件包的文档; onImageLoad(image)
将 return 你加载的图像。
您也可以使用 onBeforeFileLoad
函数。并将其设置为 <img src={original}>
元素,例如
const onBeforeFileLoad = (elem) => {
....
else {
setOriginal(elem.target.files[0])
}