使用localStorage存儲和檢索PNG時的空白圖像

Question

試圖加載&將圖像檢索到local storage或從localstorage檢索圖像。內容安全不是我想的問題。

某處的代碼破壞了未正確存儲在本地存儲器中的圖像或未正確加載本地存儲器中的圖像。

下面是檢查圖像是否可從localstorage獲取的代碼。如果可以從會話中獲得，則從本地存儲中獲取。否則從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'); 
    }