Is it possible to reduce the image size when converting it into base64 format in react js?

Question

I am using andt upload component to upload multiple image at the same time. But when uploading large size image its causing problem. Is there any way to reduce the image size when converting the image in base64 format.

this is my upload component

<Upload
       name="Upload"
       listType="picture-card"
       className="avatar-uploader"
       showUploadList={false}
       maxCount={20}
       multiple
       onPreview={onPreview}
       beforeUpload={beforeUpload}
       onChange={handleChange}
       >

Here i am calling the base64 function

getBase64(info.file.originFileObj, imageUrl =>
          base64Image(imageUrl),
    );

function to convert into base64

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
 }

yes, use canvas. [*search results](https://www.google.com/search?q=use+canvas+to+resize+image+site:stackoverflow.com) — Lawrence Cherone, Dec 14 '21 at 04:36
https://stackoverflow.com/questions/51809241/how-to-compress-a-base64-image-to-custom-size — HDM91, Dec 14 '21 at 12:59
actually i was trying to reduce the size before convert it to base64 — Abdus Sattar Nishad, Dec 15 '21 at 03:59

Digimhotep · Answer 1 · 2022-06-24T07:20:42.897

The async function converts the string image source from the react-image-file-resizer library to a base64 uri. You can use the base64 File function in the then function in the image upload location.

import React from "react";
import Resizer from "react-image-file-resizer";

export default async function base64File(
      src: string,
    ): Promise<string | ArrayBuffer | null> {
      const data = await fetch(src);
      const blob = await data.blob();
    
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      Resizer.imageFileResizer(
        blob,
        1500,
        1500,
        JPEG,
        1500,
        0,
        (uri) => {
          return resolve(uri as string);
        },
        "base64",
        200,
        200
      );
    };
  });
}


base64File("image_source" ).then((dataURL) => {})

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 24 '22 at 02:24

Is it possible to reduce the image size when converting it into base64 format in react js?

1 Answers1