Convert jpg/png to base64 using javascript and cordova 2.2.0

Question

Application I'm working on

I'm working on a Cordova 2.2.0 application that's used in a slow-(or none)internet environment.
It gains data from a CMS system. this data (JSON) is stored locally on the mobile device using Cordova's filesystem. This provides data for moments this application doesn't have access to the internet.

Problem

Data storage and recovery using Cordova's filesystem is working fine. The data stored to the filesystem is in JSON. After parsing this JSON it is converted to HTML. Problem is that this gives me IMG tags with an external source like this:

<img src="http://www.SomeUrl.com/Images/SomeImage.jpg" id="someImage" />

I want to load this Image and convert it to base64 using JavaScript. If this is possible, I will be able to write it to the local filesystem for offline use. Something like this:

var imageFromURLToBase64(imageURL){ 
    "use strict";

    var image = doSomethingWithUrl(imageURL),
        base64 = "";

    //CONVERT IMAGE TO BASE64 HERE
    return base64;
};

var imageUrl = $("#someImage").attr("src"),
    base64 = imageFromURLToBase64(imageUrl);
//Store base64 image to local filesystem

help is highly appreciated!
P.S. cross origin requests are enabled on this server!

Alternatives

If there's some better alternative for caching images out there, I'd be happy to hear about it. I've read a little bit about HTML cache manifest here, but I don't know if this suits my problem.

Duplicate question

There are more people dealing with this problem, answers to those questions didn't solve my problem. this answer or this answer don't tell me what's the best way to cache my images for a phonegap application. I wondered if there where better ways to encode images to base64, but my real question is: "What's the best way to store/cache my images for a phonegap application?"

Solution

Idea

Create canvas, load the image by using drawImage and use toDataURL() for the conversion to a base64-encoded string

Related Answer: Get image data in JavaScript?

Cautions

Canvas creation and conversion may take some time.

Some older Android phones does not support toDataURL() and pretend it is working by returning a useless string. data:,

Another idea

Use readAsDataURL in FileReader to read file and return data as a base64 encoded data url.

Related Answer: Phonegap encode image base64

---

For caching, you can search on "Lazy load image".

Comments

[annemartijn]

Since I'm dealing with alot of images I must consider performance. Your answer seems fine, but expensive. Maybe it's better to rewrite my API to return base64 images in the first place. JSON call will be more expensive that way, but I don't have to encode those images anymore.

[Ivan Chau]

Beware of memory issue when decoding base64 strings and showing those images on mobile device. If you are using File API, it would be better to get the image from server and store it directly on the file system. (Given that images are already minified from compression tool)

[annemartijn]

That's exactly what I did. I didn't use the HTML5 file API, but I did use the Cordova File API. On start of app it reads all those base64 images and presents them in img HTML tags. like this: <img src="data:image/png;base64,klsjkjdlgjlkl...." />. Sounds legit?

[Ivan Chau]

That's fine. In case if there exists memory issue, img.src can be set to a lightweight picture or you can remove those img elements to release the memory.