Transform a base64 image into a blob format for transmission to the backend via a form

Question

Transform a base64 image into a blob format for transmission to the backend via a form

Is there a way to convert a base64 string image to a blob image in order to send it to the backend using a form?

I've tried some solutions like this one, but they didn't work for me.

function 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;
}

javascript typescript image base64 blob

Answer 1

Answer №1

After some thorough cleaning, I was able to find a solution that looks something like this:

export default async function convertBase64ToBlob(dataUrl: string): Promise<Blob> {
    let image = new Image();
    return new Promise((resolve, reject) => {
        image.onload = () => {
            const canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            const context = canvas.getContext("2d");
            context?.drawImage(image, 0, 0);
            canvas.toBlob(
                (blob: Blob | null) => {
                    if (blob) resolve(blob);
                    else reject;
                },
                "image/jpeg",
                1
            );
        };
        image.onerror = reject;
        image.src = dataUrl;
    });
}

}

Here's how you can use it:

const blobData = await convertBase64ToBlob(myBase64String);
const formData = new FormData();
formData.append("image", blobData);
const { responseData } = await APIService.post("someurl/image", formData);

Answer 2

After some thorough cleaning, I was able to find a solution that looks something like this:

export default async function convertBase64ToBlob(dataUrl: string): Promise<Blob> {
    let image = new Image();
    return new Promise((resolve, reject) => {
        image.onload = () => {
            const canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            const context = canvas.getContext("2d");
            context?.drawImage(image, 0, 0);
            canvas.toBlob(
                (blob: Blob | null) => {
                    if (blob) resolve(blob);
                    else reject;
                },
                "image/jpeg",
                1
            );
        };
        image.onerror = reject;
        image.src = dataUrl;
    });
}

}

Here's how you can use it:

const blobData = await convertBase64ToBlob(myBase64String);
const formData = new FormData();
formData.append("image", blobData);
const { responseData } = await APIService.post("someurl/image", formData);

Transform a base64 image into a blob format for transmission to the backend via a form

Answer №1

Similar questions

What sets npm install apart from manual installation?

Unable to use global modules in NestJS without importing them

Activate JavaScript validation

The animation unexpectedly resets to 0 just before it begins

Setting the default selection in AngularJS based on the URL entered

How can I protect my jQuery script from being accessed by "FIREBUG"?

The design problem arises from using jQuery to dynamically prepare the table body at runtime

loading dynamic content into an appended div in HTML using Angular

The (ReactJS + Redux) form fails to load when the /new segment is appended to the URL

Obtaining the response object for the web browser

Translating PCRE(PHP) regular expressions into ECMAScript(Javascript) syntax

Angular firebase Error: The parameter 'result' is missing a specified type and is implicitly assigned the 'any' type

Learn how to implement autofocus for an ng-select element within a bootstrap modal

When using TypeScript and React with Babel, an error may occur: "ReferenceError: The variable 'regeneratorRuntime'

`Next application will have all accordions simultaneously opening`

Is the npm mqtt module continuously running but not performing any tasks?

What is the best way to modify the CSS of a child element within the context of "$(this)"

Is there a way to make the submit button navigate to the next tab, updating both the URL and the tab's content as well?

The functionality of Webdriver.waitUntil is not meeting the expected outcomes

Include the component with the function getStaticProps loaded