This JavaScript example demonstrates how to encode an image as base 64 data.
<!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>
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) }
© 20072024 XoaX.net LLC. All rights reserved.