Core JavaScript

AJAX Get Base 64 Encoded Image

This JavaScript program shows how to fetch a base 64 encoded version of an image via an AJAX call.

XoaxGetBase64ImageAjax.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Javascript AJAX Get Base-64 Image Example</title>
  <script type="text/javascript" src="XoaxGetBase64ImageAjax.js"></script>
</head>
<body>
  <button onClick="RetrieveImage()">Retrieve Image</button><br />
  <p id="idMessage"></p>
  <img id="idImage" /><br />
</body>
</html>

XoaxGetBase64ImageAjax.js

function RetrieveImage() {
  var qHttpReq        = null;
  var qImageElement   = document.getElementById("idImage");
  var qMessageElement = document.getElementById("idMessage");
  if (window.XMLHttpRequest) {
    qHttpReq = new XMLHttpRequest();
  } else {
    qMessageElement.innerHTML = "Error: XMLHttpRequest creation failed!";
    return;
  }
  // Prepare to receive the response with an anonymous function.
  qHttpReq.onreadystatechange = function() {
    if ((qHttpReq.status == 200) || (qHttpReq.status == 4)){
      qImageElement.src = "data:image/png;base64," + EncodeBase64(qHttpReq.responseText);
      qMessageElement.innerHTML = "Success!";
    } else {
      qMessageElement.innerHTML = "Error: Status = "+
      qHttpReq.status + " Message: " + qHttpReq.responseText;
    }
  }
  // Make the request
  qHttpReq.open("GET", "Plot.png", true);
  qHttpReq.overrideMimeType('text/plain; charset=x-user-defined');
  qHttpReq.send(null);
}

function EncodeBase64(sStreamIn){
  var sBase64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  var sEncoded = "";
  // Three bytes (3*8 = 24 bits) enccode four base 64 (4*6  = 24 bits) numbers.
  for (var i = 0; i < sStreamIn.length; i += 3) {
    var iByte0 = (sStreamIn.charCodeAt(i) & 0xFF);
    var iByte1 = (sStreamIn.charCodeAt(i + 1) & 0xFF);
    var iByte2 = (sStreamIn.charCodeAt(i + 2) & 0xFF);

    // The least 6 bits
    var i6Bits0 = (iByte0 >> 2);
    sEncoded += sBase64.charAt(i6Bits0);
    // The next 6 bits: two from the last byte, four from the next
    var i6Bits1 = ((iByte0 & 0x03) << 4);
    var i6Bits2 = 0;
    var i6Bits3 = 0;
    // Check whether the remaining bytes are beyond the string length.
    if (!isNaN(iByte1)) {
      // Add in the remaing four bits
      i6Bits1 = (i6Bits1 | (iByte1 >> 4));
      sEncoded += sBase64.charAt(i6Bits1);
      // Take the four remaining bits from the second byte
      i6Bits2 = ((iByte1 & 15) << 2);
      // Check whether the last byte is beyond the range
      if (!isNaN(iByte2)) {
        // Add in the next two bits
        i6Bits2 = (i6Bits2 | (iByte2 >> 6));
        sEncoded += sBase64.charAt(i6Bits2);
        // Encode the last 6 bits
        i6Bits3 = (iByte2 & 63);
        sEncoded += sBase64.charAt(i6Bits3);
      } else {
        sEncoded += sBase64.charAt(i6Bits2);
      }
    } else {
      sEncoded += sBase64.charAt(i6Bits1);
    }
  }
  return sEncoded;
}
 

Output

 
 

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