I have a react frontend backed by Django rest API. I use react-cropper to crop and upload images. When I upload images, the image size gets increased. Ex:- When I upload 149.5kb image it increases to 1.5MB. I notice that size in my API calls. But when I directly upload images to Django admin it remains in the same size. I can not figure out the exact reason for this. Photos are saved in DIgitalOcean Spaces.
Cropper
<div className="cropper_be">
<Cropper
style={{ height: '100%', width: "100%" }}
initialAspectRatio={16 / 9}
aspectRatio={16 / 9}
preview=".img-preview"
src={image}
viewMode={1}
guides={true}
minCropBoxHeight={10}
minCropBoxWidth={10}
background={false}
responsive={true}
autoCropArea={1}
checkOrientation={false}
onInitialized={(instance) => {
setCropper(instance);
}}
/>
</div>
//function for base64 to blob
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}