Saving an image for offline use in a Chrome App

Question

I have an image that is being shown in a Chrome App and is from a remote site. I want to be able to save the image locally in case network connection is unavailable.

I've been researching and found some APIs that might help me such as chrome.fileSystem, however, there aren't any simple examples like this.

Would someone be able to provide me with a simple example on how to do this?

It is preferred if the user doesn't have to press save or anything, having the downloading happen in the background. The image changes at random so I need this to be automated if possible.

http://www.html5rocks.com/en/tutorials/file/filesystem/ – Daniel Herr Mar 30 '16 at 01:02 — Daniel Herr, Mar 30 '16 at 01:02

score 0 · Answer 1 · edited May 23 '17 at 12:15

what about storing it in localStorage?

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

then to restore (adapted from this 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;

I tried this, however, localStorage is not allowed in chrome apps, I changed over those commands to the Chrome equivalent to local storage and it doesn't appear to be working. — CdnXxRRODxX, Mar 30 '16 at 01:58

Saving an image for offline use in a Chrome App

1 Answers1