Пустой образ при использовании localStorage для сохранения и получения PNG

Question

Попытка загрузить & получить изображение в/из localstorage. Я уверен, что безопасность контента не является проблемой.

Где-то код разрушает изображение, которое не хранится правильно в локальном хранилище или неправильно загружено изображение из локального хранилища.

Ниже приведен код, позволяющий проверить, доступно ли изображение из localstorage. Если это доступно из сеанса, получите его из 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); 
    } 

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