Increasing image size after uploading React js + Django

Viewed 77

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;
    }
0 Answers
Related