javascript - 使用 localStorage 存储和检索 PNG 时的空白图像

Question

尝试从本地存储加载和检索图像。我猜内容安全性不是问题。

代码在某处破坏了图像未正确存储在本地存储中或图像未从本地存储正确加载。

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

下面的代码将在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);
    }

获取Base64Image

function getBase64Image(img) {

  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");

  return dataURL;
}

当我执行 console.log(dataURL) 时，它会生成以下输出，我猜有些地方不对...

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABZUlEQVR4Xu3TQREAAAiEQK9/aWvsAxMw4O06ysAommCuINgTFKQgmAEMp4UUBDOA4bSQgmAGMJwWUhDMAIbTQgqCGcBwWkhBMAMYTgspCGYAw2khBcEMYDgtpCCYAQynhRQEM4DhtJCCYAYwnBZSEMwAhtNCCoIZwHBaSEEwAxhOCykIZgDDaSEFwQxgOC2kIJgBDKeFFAQzgOG0kIJgBjCcFlIQzACG00IKghnAcFpIQTADGE4LKQhmAMNpIQXBDGA4LaQgmAEMp4UUBDOA4bSQgmAGMJwWUhDMAIbTQgqCGcBwWkhBMAMYTgspCGYAw2khBcEMYDgtpCCYAQynhRQEM4DhtJCCYAYwnBZSEMwAhtNCCoIZwHBaSEEwAxhOCykIZgDDaSEFwQxgOC2kIJgBDKeFFAQzgOG0kIJgBjCcFlIQzACG00IKghnAcFpIQTADGE4LKQhmAMNpIQXBDGA4LQQL8oTPAGUY76lBAAAAAElFTkSuQmCC

第一次加载图像，从第二次开始我得到一张空白图像...不知道我错过了什么？？？

Answer 1

当您将图像写入本地存储时，图像尚未完全加载。空白图像改为存储在本地存储中 - 并在后续访问时检索。

要确保图像在本地写入之前加载，请为图像创建一个 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);

到:

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