Converting image to base64 gives the same output on every image (JavaScript)

Question

I'm trying to encode image with base64 like this:

var image = localStorage.getItem("image");
alert(image);
function readImage(url, callback) {
    var request = new
    XMLHttpRequest(); request.onload = function () {
        var file = new FileReader();
        file.onloadend = function () {
            callback(file.result);
        }
        file.readAsDataURL(request.response);
    };
    request.open('GET', url);
    request.responseType = 'blob';
    request.send();
}

readImage(image, function (base64) {
    localStorage.setItem("Base64", base64);
});
var base64_2 = localStorage.getItem("Base64");

It gives me the same base64 output on every picture link I get from localStorage (Checked it, the images from localStorage are different).

What is the problem?

Because you are not waiting for the data to load. `var base64_2 = localStorage.getItem("Base64");` runs _before_ `localStorage.setItem("Base64", base64);`. — Sergiu Paraschiv, Apr 23 '18 at 16:19
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Sergiu Paraschiv, Apr 23 '18 at 16:19

score 0 · Answer 1 · answered Apr 23 '18 at 17:00

You are not getting base64 because of Async code inside readImage. XMLHttpRequest and FileReader both works in Async manner due to this your bottom code execute first after that It will come in callback

readImage(image, function (base64) {
    localStorage.setItem("Base64", base64);
    successHandler();  //successHandler will call when callback return base64 after processing
});

function successHandler(){
    var base64_2 = localStorage.getItem("Base64");
}

Converting image to base64 gives the same output on every image (JavaScript)

1 Answers1