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

tags:

canvas
html5

views:

1997

answers:

+5 Q:

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

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.

+7 A:

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.

olliej 2009-06-18 01:09:26

By Application Cache, do you mean using the Manifest? I've got the manifest working pretty well (http://wecreategames.com/blog/?p=210), but want to pull down dynamic images during the session and have those available later when offline. After searching, I'm not sure what other application cache you might mean. Thanks!

JayCrossler 2009-06-18 16:10:24

That's what i meant. If you want to download other images what you need to do depends on circumstances.If you control where all the images are, the application cache manifest entries are considered prefixes, so 'http://example.com/images' in the manifest will result in any loads below images, say 'http://example.com/foo.jpeg' will be placed in the app cache for later loads.If you don't control where the images are then you'll need to do the draw to canvas + toDataURL trick i also mentioned.

olliej 2009-06-18 20:21:51

Very cool. I'll reread the manifest spec, I didn't know that worked. I also got the toDataURL trick that you suggested to work, though I did need to make sure the images were coming from the same domain as the HTML. I've posted the working code at http://wecreategames.com/blog/?p=219

JayCrossler 2009-06-19 17:40:13

Using something like a data URL hack is required on the iPhone/iPad - Apple's API documentation explicitly states it is not currently possible to manipulate the cache via JavaScript (their phrasing suggests it's something that we may see in future however).

Iain Collins 2010-06-14 08:44:05

mb21 2010-04-06 10:04:37

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

Andrew 2010-07-24 23:06:24

You can save HTML5 canvas data to image with PHP, take a look at http://motyar.blogspot.com/2010/04/save-html5-canvas-data-as-image.html

Motyar 2010-08-02 06:10:20

ansaurus

tags:

views:

answers:

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

related questions