Speichern eines Bildes zur Offline-Verwendung in einer Chrome App

Question

Ich habe ein Bild, das in einer Chrome App angezeigt wird und von einer Remote-Site stammt. Ich möchte das Bild lokal speichern können, falls die Netzwerkverbindung nicht verfügbar ist.

Ich habe recherchiert und einige APIs gefunden, die mir helfen könnten, wie chrome.fileSystem, aber es gibt keine einfachen Beispiele wie diese.

Kann mir jemand ein einfaches Beispiel dafür geben?

Es ist bevorzugt, wenn der Benutzer nicht speichern oder irgendetwas drücken muss, das Herunterladen im Hintergrund passieren. Das Bild ändert sich nach dem Zufallsprinzip, so dass ich es möglichst automatisieren muss.

Answer 1

was ist mit der Speicherung in localStorage?

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

dann wieder herzustellen (angepasst von diesem 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;