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

Sort through various table columns

The function SetInterval is invoked multiple times

.ajax() triggers a page refresh upon pressing the ENTER key

Identifying the method of navigation using PerformanceNavigationTiming

Tips for type guarding in TypeScript when using instanceof, which only works with classes

Connecting Mailchimp with WordPress without using a plugin can lead to a Bad Request 400 error when trying to

The Angular overlay panel remains open consistently

Implementing reCaptcha on React Native: A Step-by-Step Guide

Capture the onclick attribute with jQuery and then reapply it

What is the process for modifying href generation in UI-Router for Angular 2?

Can you explain the functionality of that snippet of JavaScript code?

Comparison of valueChanges between ReactiveForms in the dom and component级主动形

Getting News API and showcasing the information in Vuetify.js card components: A step-by-step guide

Is it possible that Angular 6's ngOnChanges directive is not compatible with a lambda expression?

Receiving a notification when attempting to log in with incorrect credentials

What is the process to retrieve a variable from a Node.js file in an HTML document?

Displaying various images within a bootstrap modal window

Why do we often encounter a "SyntaxError: Unexpected token ;" error when a seemingly normal semicolon is present in distribution files?

What is the best way to consolidate all app dependencies into a single package?

The call to Contentful's getAsset function resulted in an undefined value being