0

I have several png images sitting in my project which will be dynamically selected so I need a function in js that will take a relative path to those png files and return a base64 string something like this "url(data:image/png;base64,iVBORw0KGgoAA)

My file paths are something like this "/Content/Images/OK-x-small.png" So I need base64 representation of OK-x-small.png image please.

How can I do this?

Sarah
  • 1,199
  • 2
  • 21
  • 42

1 Answers1

0
function toBase64(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
        callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();

}

toBase64('./path-to-image.png',
    function(dataUrl) {
        console.log("url(" + dataUrl + ")")
    });
Claytronicon
  • 1,437
  • 13
  • 14
  • Thank you much. Since I need to use dataURL at several places in my JS file. How can use it outside of this tobase64 function? tried doing this but dataURL value stayed null. var dataUrl = null toBase64('./Content/Images/OK-x-small.png', function (dataUrl) { }); alert(dataUrl) – Sarah May 08 '18 at 19:41
  • You can assign it to a variable for use outside of this function. – Claytronicon May 08 '18 at 19:54
  • Thanks, see my code in the comment, I tried doing that and it didn't work. What am I missing here? var dataUrl = null ; toBase64('./Content/Images/OK-x-small.png', function (dataUrl) { }); alert(dataUrl) – Sarah May 08 '18 at 21:41
  • The alert is being called outside of the callback so the image has not yet been loaded when the alert is called, also the dataUrl inside the function is a param of the function and was not assigned to the variable. Try something like this: var myData = null; toBase64('https://upload.wikimedia.org/wikipedia/commons/1/1a/1x1_placeholder.png', function(dataUrl) { myData = ("url(" + dataUrl + ")"); alert(myData + " is now assigned and can be used outside the function"); }); – Claytronicon May 08 '18 at 22:04
  • Thanks much for your help on this. Value of myData outside the function is coming out to be still Null. alert is inside the function, so it has values. But as soon as I put an alert outside of function, the value is null. What am I missing here? – Sarah May 09 '18 at 00:06
  • var myData = null; toBase64('../Images/test.jpg', function (dataUrl) { myData = ("url(" + dataUrl + ")"); alert(" is now assigned and can be used outside the function" + myData ); }); alert(myData); – Sarah May 09 '18 at 00:09
  • Last alert is null and that's where I need myData to have the base64 value please. – Sarah May 09 '18 at 00:09
  • the alert outside of the callback is being called before myData has been assigned. You'll need to wait for the xhr request to load the file and handle it before myData can be assigned and referenced outside of the function. That's what the callback is doing. You could also dispatch an event or use a Promise like in this post https://stackoverflow.com/questions/30008114/how-do-i-promisify-native-xhr – Claytronicon May 09 '18 at 00:13