Creating a Blob from a base64 string in JavaScript

Creating a Blob from a base64 string in JavaScript

To create a Blob from a base64-encoded string in JavaScript, you need to follow these steps:

  1. Decode the Base64 String: Convert the base64 string to binary data.
  2. Create a Blob Object: Use the binary data to create a Blob.

Here's how you can accomplish this:

1. Decode the Base64 String

JavaScript provides a way to decode base64-encoded strings using the atob() function. However, atob() returns a binary string, so you'll need to convert it into a Uint8Array or ArrayBuffer to create a Blob.

2. Create the Blob

Once you have the binary data, you can create a Blob with it.

Example Code

Here's a complete example of how to create a Blob from a base64 string:

// Function to convert a base64 string to a Uint8Array function base64ToUint8Array(base64) { const binaryString = atob(base64); // Decode base64 string to binary const len = binaryString.length; const bytes = new Uint8Array(len); for (let i = 0; i < len; i++) { bytes[i] = binaryString.charCodeAt(i); } return bytes; } // Function to create a Blob from a base64 string function base64ToBlob(base64, mimeType) { const uint8Array = base64ToUint8Array(base64); return new Blob([uint8Array], { type: mimeType }); } // Example usage: const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4J7e/8dCP7mEAAL1qYbU8jAq2LAAAAAElFTkSuQmCC'; const mimeType = 'image/png'; // Change this to the correct MIME type const blob = base64ToBlob(base64String, mimeType); console.log(blob);

Explanation

  1. base64ToUint8Array(base64):

    • atob(base64) decodes the base64 string to a binary string.
    • Convert this binary string to a Uint8Array for creating the Blob.

  2. base64ToBlob(base64, mimeType):

    • Use the Uint8Array from base64ToUint8Array to create a Blob.
    • The mimeType specifies the type of data contained in the Blob, such as 'image/png' or 'application/pdf'.

Additional Notes

  • MIME Type: Ensure you use the correct MIME type for the Blob based on the content you are encoding.
  • Blob Usage: You can use the created Blob for various purposes, such as displaying images in an <img> tag, uploading to a server, or creating downloadable files.

Example Usage: Displaying an Image

If you're working with image data, you can display it using an ObjectURL:

const url = URL.createObjectURL(blob); const img = document.createElement('img'); img.src = url; document.body.appendChild(img); // Clean up after use URL.revokeObjectURL(url);

This will create an image element and display the base64-encoded image in the browser.

Examples

  1. How to convert a base64 string to a Blob in JavaScript?

    Description: Use atob to decode the base64 string and then create a Blob using Uint8Array.

    Code:

    function base64ToBlob(base64, mime) { const byteCharacters = atob(base64); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mime }); } const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAA...'; // truncated base64 string const blob = base64ToBlob(base64String, 'image/png');

  2. How to create a Blob URL from a base64 string in JavaScript?

    Description: Convert the base64 string to a Blob and create a URL using URL.createObjectURL.

    Code:

    function base64ToBlobUrl(base64, mime) { const blob = base64ToBlob(base64, mime); return URL.createObjectURL(blob); } const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAA...'; // truncated base64 string const blobUrl = base64ToBlobUrl(base64String, 'image/png'); console.log(blobUrl); // Use this URL to display the image or download it

  3. How to handle large base64 strings efficiently in JavaScript?

    Description: Use streams or chunk processing to handle large base64 strings and avoid memory issues.

    Code:

    function base64ToBlobLarge(base64, mime) { const chunkSize = 512 * 1024; // 512KB chunk size const byteCharacters = atob(base64); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += chunkSize) { const slice = byteCharacters.slice(offset, offset + chunkSize); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } byteArrays.push(new Uint8Array(byteNumbers)); } return new Blob(byteArrays, { type: mime }); } const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAA...'; // truncated base64 string const blob = base64ToBlobLarge(base64String, 'image/png');

  4. How to create a Blob from a base64 string and read it as text in JavaScript?

    Description: Convert the base64 string to a Blob and use FileReader to read it as text.

    Code:

    function base64ToBlob(base64, mime) { const byteCharacters = atob(base64); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mime }); } const base64String = 'SGVsbG8gd29ybGQ='; // base64 for "Hello world" const blob = base64ToBlob(base64String, 'text/plain'); const reader = new FileReader(); reader.onload = function(event) { console.log(event.target.result); // Outputs "Hello world" }; reader.readAsText(blob);

  5. How to convert a base64 string to a Blob and download it as a file in JavaScript?

    Description: Convert the base64 string to a Blob and create a downloadable link.

    Code:

    function base64ToBlob(base64, mime) { const byteCharacters = atob(base64); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mime }); } function downloadBlob(base64, filename, mime) { const blob = base64ToBlob(base64, mime); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAA...'; // truncated base64 string downloadBlob(base64String, 'image.png', 'image/png');

  6. How to convert a base64 string of an image to a Blob and display it in an HTML <img> tag?

    Description: Convert the base64 string to a Blob and use the Blob URL to set the src of an <img> tag.

    Code:

    function base64ToBlob(base64, mime) { const byteCharacters = atob(base64); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mime }); } function displayImage(base64) { const blob = base64ToBlob(base64, 'image/png'); const url = URL.createObjectURL(blob); const img = document.createElement('img'); img.src = url; document.body.appendChild(img); URL.revokeObjectURL(url); // Clean up after image is loaded } const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAA...'; // truncated base64 string displayImage(base64String);

  7. How to handle base64 strings with different encodings when creating a Blob in JavaScript?

    Description: Ensure proper decoding of base64 strings before creating a Blob.

    Code:

    function base64ToBlob(base64, mime) { const byteCharacters = atob(base64.replace(/\s/g, '')); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mime }); } const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAA...'; // truncated base64 string const blob = base64ToBlob(base64String, 'image/png');

  8. How to use a base64 string to create a Blob and send it via XMLHttpRequest in JavaScript?

    Description: Convert the base64 string to a Blob and send it as a POST request with XMLHttpRequest.

    Code:

    function base64ToBlob(base64, mime) { const byteCharacters = atob(base64); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mime }); } function sendBlob(base64, url, mime) { const blob = base64ToBlob(base64, mime); const xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader('Content-Type', mime); xhr.send(blob); } const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAA...'; // truncated base64 string sendBlob(base64String, '/upload', 'image/png');

  9. How to create a Blob from a base64 string and use it in a Canvas in JavaScript?

    Description: Convert the base64 string to a Blob, create an object URL, and draw it on a <canvas>.

    Code:

    function base64ToBlob(base64, mime) { const byteCharacters = atob(base64); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mime }); } function drawImageOnCanvas(base64) { const blob = base64ToBlob(base64, 'image/png'); const url = URL.createObjectURL(blob); const img = new Image(); img.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); document.body.appendChild(canvas); URL.revokeObjectURL(url); }; img.src = url; } const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAA...'; // truncated base64 string drawImageOnCanvas(base64String);

  10. How to create a Blob from a base64 string and save it using FileSaver.js?

    Description: Use FileSaver.js to save a Blob created from a base64 string.

    Code:

    function base64ToBlob(base64, mime) { const byteCharacters = atob(base64); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mime }); } function saveAsBlob(base64, filename, mime) { const blob = base64ToBlob(base64, mime); saveAs(blob, filename); // Requires FileSaver.js } const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAA...'; // truncated base64 string saveAsBlob(base64String, 'file.png', 'image/png');

More Tags

robolectric replaceall rx-android dropshadow rerender reactstrap jquery-plugins gnu-findutils perforce uiactivityviewcontroller

More Programming Questions

More Electronics Circuits Calculators

More General chemistry Calculators

More Statistics Calculators

More Animal pregnancy Calculators