Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In HTML5, can you save an image to cache programmatically?

Tags:

html

canvas

I love that in HTML5 you can save text data out to a local database, and can even use SQL to do it. (http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/)

I've got an app that I've written for the iPhone's MObile Safari that caches everything offline except for images. The images still have to be downloaded from the server, and I don't know how to ensure that they will stay cached. Ideally, I'd like to write them out to the localStorage database.

I was thinking of writing an image to the canvas, and then serializing that as text... any ideas? Is there any easier way to do this?

Ideally, I'd like to do this all with HTML and JavaScript, no native apps/objective-C.

like image 549
JayCrossler Avatar asked Jun 18 '09 01:06

JayCrossler


People also ask

Can images be cached?

Image caching essentially means downloading an image to the local storage in the app's cache directory (or any other directory that is accessible to the app) and loading it from local storage next time the image loads.

Can HTML be cached?

Implementing user personalization in scripts allows caching of the page's HTML. Then the scripts can modify the page after loading asynchronously. Beyond using JavaScript for personalization, The Gap is caching HTML.

Should images be cached?

Generally yes, images should be cached in at least memory, and depending on your app (how likely is it to be reused,etc) in memory and storage. If you want to support your 3rd point (displaying when offline), you need to do storage caching, and memory caching is optional but probably a good idea.


1 Answers

Look at the application cache in html5, that does basically exactly what you want (it's also what you want to use if you want to support completely offline web applications).

Alternatively you could (somewhat ugly)daw the image to canvas, then to canvas.toDataURL() to get a data url for the image, which you can then store in the normal database or offline storage apis.

like image 160
olliej Avatar answered Nov 08 '22 13:11

olliej