convert base64 string to image with javascript

Question

Am developing an application with Titanium. I need to convert base64 string which i would be getting from JSON to an image.

Your help would be greatly appreciated.

Zakaria

ref: en.wikipedia.org/wiki/Data_URI_scheme#HTML – Brahman

Answer 1

You can just create an img element and change its src with the required data:

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />

Tagore

Provided the image is small enough, yeah, and if you don't need to support IE7 and lower: caniuse.com/#feat=datauri Browser limits on the length of data: URI strings vary wildly. I think IE8's is the lowest at 32k. – Usquebaugh

I am developing with Titanium, there is no img tag as everything is javascript. I know for images that are on the file system i need to do something like this: rightImage: Titanium.Filesystem.resourcesDirectory + 'images/ui/backimage.png'. But I dont know what to do for images on a remote location – Zakaria

Can you please add further details on what you exactly want (editing your question). – Tagore

Answer 2

For Titanium, you use the built in conversion utility Titanium.Utils.base64decode:

var imageFromBase64 = Titanium.UI.createImageView({
    image : Titanium.Utils.base64decode("iVBORw0KGgoAAAANS..."),
});

This converts a base64 string to a blob, which can be used in an ImageView.

Coseismal