4

I am building an extension for Chrome. Is there a way of grabbing an image from a URL and write it in local storage, so that the extension can display the image even when the user is not online?

Peter Burns
  • 44,401
  • 7
  • 38
  • 56
flea whale
  • 1,783
  • 3
  • 25
  • 38

1 Answers1

4

You can encode it in base64 (here the function), and then storing the result in localstorage, for example.

Community
  • 1
  • 1
Gaël Barbin
  • 3,769
  • 3
  • 25
  • 52
  • Thanks, that's really helpful... I can see how to convert an image into a string and save it in local storage. Now call me thick, but how do I then turn that string back into an image object and display it on the screen? – flea whale Nov 26 '11 at 00:32
  • 1
    Using the data-uri scheme ([http://en.wikipedia.org/wiki/Data_URI_scheme#Inclusion_in_HTML_or_CSS_using_PHP]). myImgElement.src= localStorage.myStoredImage; You have to be careful: at the end of the function, the "header" of the image is removed ( data:image/jpg;base64, ). It's necessay because you'll turn the data-uri back. – Gaël Barbin Nov 26 '11 at 00:36
  • 1
    not necessary* or you can also add the mime when you want to retrieve your image : myImgElement.src= "data:image/jpg;base64," + localStorage.myStoredImage; – Gaël Barbin Nov 26 '11 at 00:46