Question

So I have a function that converts an image to grayscale.
It takes in an url for the origonal image, and an output canvas to put the output onto.
The function runs very quick on most browsers however very slow on mobile browsers (~3-4s for a 700×700 image). For this reason I want to cache (on the client) the grayscale image data, then when a request for the image comes multiple times, I want to serve up the cached grayscale data and not have to recalculate it.

I have whipped up a test on jsfiddle. Here it is: http://jsfiddle.net/RCkDX/4/
In the test page I display the origonal image at the top, I output the canvas that is used to do the calculation at the bottom and the two canvas’ in the middle they should output the same as the bottom image (except with cached data).

At the moment I get a ‘Uncaught TypeError: Type error’, I think its because it doesnt seem to like the cache data, I have tried moving things around, trying different methods but have not had any luck.

It is important that I do not use dataurls to cache as the android mobile browser I am using will display a little blue question mark icon at the moment (not the correct data on the canvas), so any option without dataurls would work.

Answer 1

@jezternz, I think 'Uncaught TypeError: Type error' in your code occurs because readyCanvas function called from returnFunc each time (no difference: cache exist or not); and inside readyCanvas grayscaleCache[src] can return undefined if no cache. In my code example (jsfiddle.net/RCkDX/5) readyCanvas called from returnFunc only if grayscaleCache[src] is defined (cache is constructed and saved).
From my code removed setTimeout. Main reason: for simplify example.

If you need to build code with no blocking page (without freeze UI) you must provide more complex code for managing cache. For example:

• grayscaleCache[src] is undefined that mean “no cache and cache is not under construction by any previous request” – you need to start caching procedure;
• grayscaleCache[src] equals to null that mean “cache is under construction by previous request” – you dont need to start caching procedure, you must only wait (check with setTimeout) when cache is ready;
• grayscaleCache[src] is not undefined and not null – “cache is ready” – use cache.