This JavaScript program shows how to fetch a base 64 encoded version of an image via an AJAX call.
<!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>
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; }
© 20072024 XoaX.net LLC. All rights reserved.