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

Question

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.

Answer 1

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.

Answer 2

You could do what Google does in Mobile GMail and implement as a data Url. This means that following would be cached as part of the page (if included in cache.manifest), as they are not external. Either:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

Or:

<style type="text/css">
.Jd{background:#fff;width:100%;border-width:7px;-webkit-box-sizing:border-box;-webkit-border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAWCAYAAAAvg9c4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUlJREFUeNpi/P//P4O+VwcfAwODGxDLATGITSr4BMSPgHjXxW0Vnxj1PNtFmBgZU/79/38MKHgBqoAoADQATEMdZQA0xwpozlwWEUFu7zfvvx4ACp5gIBOAXAekDgEN/yEqzOPD9P3nHwWoC6kBLnz99kue6eu3n4xAzg8Civ8jYXwu/vXt+y8GJgYagBFuKAuOSCEUabD0CYsgxmHifVjWQwYwb+KSJ2go0ABGAuHISMiCkZ5OBfm5mN9//MaBr1BBDjvkSMMSH2z8vBzMLI4Wqjzrdl7UA4qdwqOYkUhHGjhbqfOwxAaafjh0+q7fm3dfQK49B8RfSPUu0FIeIGUkIsTjBjKPEVhHyQO93zV96ZFXR8/c+/zkxYdfpBoqIyHAZm2ixJsZbSMGDM4ykKEgcREgzgRibSAWIiNu3gHxVSCeDsRvAAIMAK29e2M9JZVZAAAAAElFTkSuQmCCCg==") 9 7 8 7}
</style>

Read more on the subject here: http://www.websiteoptimization.com/speed/tweak/inline-images/

Answer 3

You could store the images using the Data UI scheme in the HTML5 database.

Answer 4

see also: http://www.w3.org/TR/offline-webapps/