Javascript Hex String to Image

Question

I'll cut right to the chase. Right now I am developing a web based application. It has a PHP REST based architecture that serves up XML documents. On many of these documents attributes are hex encoded picture strings.

On the client side jQuery AJAX fetches an XML document with a picture in it. I need to display said picture in some <img> tags. However my knowledge on such methods is lacking so here I am asking for help.

Goal: JavaScript String variable in hex or base64 >>> HTML displayed image.

Cross browser is required, or a hack for the ones that do not support it is fine.

Thanks, Gunnar

Answer 1

Encode the images using base64 and write them out in a CDATA string into your XML with this format:

data:[<MIME-type>][;charset="<encoding>"][;base64],0123456789abcdefg...

When constructing your document, use this string as your src

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

Answer 2

Is it possible to use a php file just for rendering the image? That php file could write some base64 encoded values via

echo base64_decode($_GET['data']); 

while you embed images like

<img src="http://host/yourPhpFileForDecode.php?data=base64encoded.../>