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

由于base64内的Async代码，您未收到readImage。 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");
}

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

1 个答案: