将图像转换为base64可以在每个图像上提供相同的输出（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?

Answer 1

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");
}