Convert Blob to Base64

Convert blob to base64

var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
  var base64data = reader.result;                
  console.log(base64data);
}

Form the docs readAsDataURL encodes to base64

As an awaitable function:

function blobToBase64(blob) {
  return new Promise((resolve, _) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

Note: The blob's result cannot be directly decoded as Base64 without first removing the Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, first remove data:/;base64, from the result.

How to convert blob to base64?

Not knowing what the function setImageServer() does, it's probably because URL.createObjectURL() returns a DOMString (which is basically a string type):

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

https://developer.mozilla.org/en-US/docs/Web/API/DOMString

So your console.log is printing out a string representation of your blob object, not the blob itself. You could maybe try this to convert your DOMString to base64:

https://reference.codeproject.com/book/javascript/base64_encoding_and_decoding

Convert blob url to file or Base64 to upload to cloudinary

In both the cases you are actually converting the imageUrl into blob.
For some reason it doesn't work.

Instead converting the imageUrl directly to the blob worked for me.

The code goes like:

const getBase64FromUrl = async (url) => {
    const data = await fetch(url);
    const blob = await data.blob();
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = () => {
        const base64data = reader.result;
        resolve(base64data)
      };
    });
  };

And then use the function like this.

const myImage = await getBase64FromUrl(imageUrls[i]);

Creating a BLOB from a Base64 string in JavaScript

The atob function will decode a Base64-encoded string into a new string with a character for each byte of the binary data.

const byteCharacters = atob(b64Data);

Each character's code point (charCode) will be the value of the byte. We can create an array of byte values by applying this using the .charCodeAt method for each character in the string.

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

You can convert this array of byte values into a real typed byte array by passing it to the Uint8Array constructor.

const byteArray = new Uint8Array(byteNumbers);

This in turn can be converted to a BLOB by wrapping it in an array and passing it to the Blob constructor.

const blob = new Blob([byteArray], {type: contentType});

The code above works. However the performance can be improved a little by processing the byteCharacters in smaller slices, rather than all at once. In my rough testing 512 bytes seems to be a good slice size. This gives us the following function.

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

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

Full Example:

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;}
const contentType = 'image/png';const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const blob = b64toBlob(b64Data, contentType);const blobUrl = URL.createObjectURL(blob);
const img = document.createElement('img');img.src = blobUrl;document.body.appendChild(img);

How to convert Blob URL to Base64 string and retrieve an Image URL using Cloudinary Client-Side?

I've figured it out:

After a few hours, and some nice people posting on StackOverflow I have pieced it together.

const getBlobData = (file) => {
    axios({
      method: "get",
      url: file, // blob url eg. blob:http://127.0.0.1:8000/e89c5d87-a634-4540-974c-30dc476825cc
      responseType: "blob",
    }).then(function (response) {
      var reader = new FileReader();
      reader.readAsDataURL(response.data);
      reader.onloadend = function () {
        var base64data = reader.result;
        const formData = new FormData();
        formData.append("file", base64data);
        formData.append("api_key", YOUR_API_KEY);
        // replace this with your upload preset name
        formData.append("upload_preset", YOUR_PRESET_NAME);//via cloudinary
        axios({
          method: "POST",
          url: "https://api.cloudinary.com/v1_1/YOUR_CLOUD_NAME/upload",
          data: formData,
        })
          .then((res) => {
            const imageURL = res.data.url;
            //YOU CAN SET_STATE HOWEVER YOU WOULD LIKE HERE.
          })
          .catch((err) => {
            console.log(err);
          });
      };
    });
  };

---

Related Topics