Core JavaScript

Encoding an Image as Base 64

This JavaScript example demonstrates how to encode an image as base 64 data.

ConvertImageToBase64.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Base64 image converter</title>
    <script type="text/javascript" src="ConvertImageToBase64.js">
    </script>
  </head>
  <body>
    <button type="button" onclick="TheCallBack()">Convert</button>
    <button type="button" onclick="{ PrintMessage(null); }">Clear</button>
	<h3>Result:</h3>
	<img id="idResult"/><br/>
    <textarea rows="100" cols="100" id="OutMessage"></textarea>
  </body>
</html>

ConvertImageToBase64.js

// Requires a web server
function toDataURL(sURL, pfnCallback) {
  var qHttpRequest = new XMLHttpRequest();
  qHttpRequest.onload = function() {
    var qFileReader = new FileReader();
    qFileReader.onloadend = function() {
      pfnCallback(qFileReader.result);
    }
    qFileReader.readAsDataURL(qHttpRequest.response);
  };
  qHttpRequest.open('GET', sURL);
  qHttpRequest.responseType = 'blob';
  qHttpRequest.send();
}

function PrintMessage(sData) {
  var qMessageElement = document.getElementById("OutMessage");
  qMessageElement.innerHTML = sData;
  var qImageElement = document.getElementById("idResult");
  qImageElement.src = ((sData == null) ? "" : sData);
}

function TheCallBack() {
  toDataURL('XoaXLogoNew.png', PrintMessage)
}
 

Output

 
 

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