Javascript 使用localStorage存储&；时为空白图像；检索PNG

正在尝试将映像加载到本地存储并从中检索映像。我想内容安全不是问题

在某个地方，代码正在破坏本地存储中未正确存储的映像或未从本地存储中正确加载的映像

下面是检查图像是否可从localstorage获得的代码。如果从会话中可用，请从本地存储中获取它。否则，从URL获取它，显示图像，并存储在localstorage中

以下代码将在

pagebeforecreate执行

    var dataImage = localStorage.getItem('ses_image');

    var img = $('<img crossorigin="anonymous" width="100%" height="100%" id="img_menu-item" style="height: 100%;width:100%">');
    jQuery('#pg_home_content').append(img);

    if(dataImage){
        bannerImg = document.getElementById('img_menu-item');
        bannerImg.src = dataImage;
        jQuery('#pg_home_content').append(bannerImg);
    }else{
        img.attr('src', 'http://example.com/myimage.png');
        bannerImage = document.getElementById('img_menu-item');
        bannerImage.setAttribute('crossOrigin', 'anonymous');
        imgData = getBase64Image(bannerImage);
        localStorage.setItem('ses_image', imgData);
    }

当我执行
console.log（dataURL）
时，它会生成下面的输出，我想可能是出了什么问题

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABZUlEQVR4Xu3TQREAAAiEQK9/aWvsAxMw4O06ysAommCuINgTFKQgmAEMp4UUBDOA4bSQgmAGMJwWUhDMAIbTQgqCGcBwWkhBMAMYTgspCGYAw2khBcEMYDgtpCCYAQynhRQEM4DhtJCCYAYwnBZSEMwAhtNCCoIZwHBaSEEwAxhOCykIZgDDaSEFwQxgOC2kIJgBDKeFFAQzgOG0kIJgBjCcFlIQzACG00IKghnAcFpIQTADGE4LKQhmAMNpIQXBDGA4LaQgmAEMp4UUBDOA4bSQgmAGMJwWUhDMAIbTQgqCGcBwWkhBMAMYTgspCGYAw2khBcEMYDgtpCCYAQynhRQEM4DhtJCCYAYwnBZSEMwAhtNCCoIZwHBaSEEwAxhOCykIZgDDaSEFwQxgOC2kIJgBDKeFFAQzgOG0kIJgBjCcFlIQzACG00IKghnAcFpIQTADGE4LKQhmAMNpIQXBDGA4LQQL8oTPAGUY76lBAAAAAElFTkSuQmCC

这是第一次加载图像，从第二次开始，我得到一个空白图像。。。不确定我遗漏了什么？？？
在您将图像写入本地存储时，图像尚未完全加载。空白图像存储在本地存储器中，并在后续访问时检索

要确保在本地写入映像之前加载映像，请为映像创建
onload
事件处理程序

在代码中，更改：

    img.attr('src', 'http://example.com/myimage.png');
    bannerImage = document.getElementById('img_menu-item');
    bannerImage.setAttribute('crossOrigin', 'anonymous');
    imgData = getBase64Image(bannerImage);
    localStorage.setItem('ses_image', imgData);

致：

是否在
控制台上记录了任何错误
？@guest271314否，控制台上没有错误。在调用
.toDataURL（）
时，尝试不包括
“image/png”
？@guest271314现在尝试。。同样的结果。。。实际上，我正在尝试加载2个图像（在我要求的问题中）。我注意到，
dataURL
的输出对于两个图像都是相同的。。。。理想情况下，它不应该是相同的权利？？？你能创建一个plnkr来演示吗？谢谢。我相信在我的情况下，它不是
img[0]
，而是
bannerImage
。映像现在已加载，但是我遇到了一个不同的问题（很高兴提出一个单独的线程），因为我在循环中调用此方法，并且onload是
async
映像始终存储在循环中的最后一个变量中。不客气。你能解释一下你遇到的第二个问题吗？提出了另一个问题，很高兴你找到了解决办法！
    img.attr('src', 'http://example.com/myimage.png');
    bannerImage = document.getElementById('img_menu-item');
    bannerImage.setAttribute('crossOrigin', 'anonymous');
    imgData = getBase64Image(bannerImage);
    localStorage.setItem('ses_image', imgData);

    console.log('loaded from url');
    bannerImage = document.getElementById("img_menu-item");
    bannerImage.setAttribute('crossOrigin', 'anonymous');

    // set the source of the image, equivalent to img.attr('src',...), but
    // slightly more performant
    img[0].src = "http://demo.jeema.org/mob20/media/com_jeemasmsmobile/menuicons/book.png";
    // delay writing to localstorage, until the image loads completely:
    img[0].onload = function () {
        imgData = getBase64Image(bannerImage);
        console.log('writing to local storage:\n' + imgData);
        localStorage.setItem('ses_image', imgData);
        console.log('image stored');
    }