将图像转换为base64可以在每个图像上提供相同的输出（JavaScript）

Question

我正在尝试使用base64编码图像，如下所示：

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

在我从localStorage获得的每个图片链接上，它给我提供了相同的base64输出（选中它，来自localStorage的图像是不同的）。

问题是什么？

Answer 1

由于readImage的Async代码，您没有得到base64 。 XMLHttpRequest和FileReader都以Async方式工作，这是因为您的最低代码将在此之后首先执行，它将进入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");
}