PhoneGap Blog

All PhoneGap PhoneGap Build PhoneGap Network
Image Caching with the HTML5 Canvas
by Jesse | 24 Sep 2009 | PhoneGap Blog

Lately I have been working on an iPhone app ( using PhoneGap of course )  and needed to implement image caching on the client with javascript.

I am already using an SQLite database in mobile safari, so I decided I could store images in Base64 in the DB.  I was able to load the binary image data using XHR, but could not correctly encode it to base64 in javascript.

Exploring another path, I found that there is a method of the HTML5 Canvas toDataURL();

So I wrote this to download the image, instead of my XHR method :

`

ImageCacheManager.prototype.fetchImage = function(url)

{

var alias = this;

var img = new Image();

img.onload = function()

{

alias.onImageLoaded(this);

};

img.src = url;

}

`

Then this to handle the loaded image and cache it :

`

ImageCacheManager.prototype.onImageLoaded = function(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();

this.cacheImageData(img.src, dataURL);

}

`

To keep things short I have excluded the DB sections, I always check if I have an image cached already before I fetch one, and always write it to the DB when I do fetch.  If an image is retrieved from the DB it can simply be written to the img.src as is.

I foresee all kinds of uses for this, like a javascript based image editor, or a water-marking script _ ( you can also draw text on the canvas before you pull out it's bits … ) _

› Visit the original post

blog comments powered by Disqus