Image Caching with the HTML5 Canvas | September 24th, 2009
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 … )