在Chrome應用程序中保存圖像以供離線使用

Question

我在Chrome應用程序中顯示的圖像來自遠程站點。如果網絡連接不可用，我希望能夠在本地保存圖像。

我一直在研究和發現一些API可能幫助我，如chrome.fileSystem，但是，沒有任何這樣的簡單例子。

有人能夠提供一個簡單的例子來說明如何做到這一點？

如果用戶不必按保存或其他任何東西，讓下載在後臺進行，則是首選。圖像隨機變化，所以如果可能的話我需要這個自動化。

Answer 1

將它存儲在localStorage？

var image = document.getElementById('bannerImg'); 
imgData = getBase64Image(image); 
localStorage.setItem("imgData", imgData); 

然後還原（改編自這個answer）：

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.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

var dataImage = localStorage.getItem('imgData'); 
bannerImg = document.getElementById('tableBanner'); 
bannerImg.src = "data:image/png;base64," + dataImage;