Core JavaScript

Convert a Base64 Image to an Image Blob

This program demonstrates how to convert a base64 image to an image blob.

ReadABase64ImageAsABlob.html

<!DOCTYPE html>
<html>
  <head>
  	<title>XoaX.net's Javascript</title>
  	<script type="text/javascript" src="ReadABase64ImageAsABlob.js"></script>
  </head>
  <body onload="Initialize()">
  	<img id="idImage" /><br />
  	<a id="idDownload">Download</a>
  </body>
</html>

ReadABase64ImageAsABlob.js

function Initialize() {
	const ksBase64Image = 'data:image/png;base64,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';

	const kqBlob = Base64StringToBlob(ksBase64Image, "image/png");
	const ksUrl = URL.createObjectURL(kqBlob);
	const kqImageElement = document.getElementById("idImage");
	kqImageElement.src = ksUrl;
	// Make it downloadable
	const kqAnchorElement = document.getElementById("idDownload");
	kqAnchorElement.href = ksUrl;
	kqAnchorElement.download = "XoaxFavIcon.png";
}

function Base64StringToBlob(sBase64, sType) {
	// Remove of the starting 'data:image/png;base64,' from the string
	const ksBase64Bytes = sBase64.split(",")[1]
	// Compress the base 64 encoding to 8 bits per byte, instead of 6
	const ksCharBytes = atob(ksBase64Bytes);
	
	// Break the bytes off into chunks for the blob
	const ksaaChunks = [];
	const kiChunkSize = 1024;
	let iByteOffset = 0;
	while (iByteOffset < ksCharBytes.length) {
		// Brek off the next chunk of character bytes.
		const ksaChunk = ksCharBytes.slice(iByteOffset, iByteOffset + kiChunkSize);
		// Decode the character chunk into a numerical array
		const kaNumbers = new Array(ksaChunk.length);
		for (let i = 0; i < ksaChunk.length; ++i) {
			kaNumbers[i] = ksaChunk.charCodeAt(i);
		}
		
		// Convert to an unsigned integer array
		const kuiaUnsignedIntBytes = new Uint8Array(kaNumbers);
		ksaaChunks.push(kuiaUnsignedIntBytes);
		iByteOffset += kiChunkSize;
	}
	return new Blob(ksaaChunks, { type: sType });
}
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.