I'm trying to save cropped images using react-cropper
. It seems to work as intended, but the URL that gets saved is crazy long. The console log of the data package alone is often over 100kb, and that's just a data URL.
When I console log (and send to a DB) I store a value that starts with data:image/png;base64,iVBORw0...
and then continues so long it takes me about 20 seconds to scroll to the end of it in my IDE.
I notice it's also an issue in the code sandbox from the official docs.
I took my code directly from that demo, but I'll paste it here as well for ease.
export const CropperWidget = ({ userPhoto }) => {
const [image, setImage] = useState(userPhoto);
const [cropData, setCropData] = useState("");
const [cropper, setCropper] = useState();
const onChange = (e) => {
e.preventDefault();
let files = e.target.files;
const reader = new FileReader();
reader.onload = () => {
setImage(reader.result);
};
reader.readAsDataURL(files[0]);
};
const getCropData = () => {
if (typeof cropper !== "undefined") {
setCropData(cropper.getCroppedCanvas().toDataURL());
}
};
useEffect(() => {
if (cropData) {
postImage(cropData);
}
});
return (
<div>
<br />
<div>
<input type="file" onChange={onChange} />
<br />
<br />
<Cropper
style={{ height: 400, width: 400 }}
initialAspectRatio={1}
preview=".img-preview"
src={image}
viewMode={1}
guides={true}
minCropBoxHeight={10}
minCropBoxWidth={10}
background={false}
responsive={true}
autoCropArea={1}
checkOrientation={false} // https://github.com/fengyuanchen/cropperjs/issues/671
onInitialized={(instance) => {
setCropper(instance);
}}
/>
</div>
<button onClick={getCropData}>Crop Image</button>
<br />
</div>
);
};
Send the data to a server, convert it to a binary, store it somewhere (e.g. your server's hard disk or Amazon S3), give it an HTTP URL, then use the HTTP URL in future.