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

Question

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

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

以下是检查图像是否可从本地存储中获得的代码。如果会话可用，则从本地存储中获取。否则从 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);
    }

getBase64Image

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