JQUERY - Retrieve binary (base64) encoded picture from XML and display in DOM

Question

I retrieve this XML file with

$.ajax({type: "GET", url: "data.xml",dataType: "xml",success: parse });

<Data>
   <user>
      <U_ID>4787<U_ID>
      <U_NAME>Mickey Mouse</N_NAME>
      <U_TYPE>1</U_TYPE>
      <U_PIC>iVBORw0KGgoAAAANSUhEUgAAAHgAAAB0CAYAAABOpv</U_PIC> 
   </user>
</Data>

Where <U_PIC> contains a base64 encoded picture (i have cut the string here for easy demo, it actually is a very long string)

How should I

• retrieve this?
• decode base64 (are there built-in functions)?
• display somewhere in the DOM?
  //example: (<li><img src="'+retrievedPicture+'=></li>)

I am used to operations like these in a standard parser function:

$(xml).find('user').each(function(){  
   var $node = $(this);
   var name = $node.find('U_NAME').text();
   $('div').append(name);    

ps. Tested the actual binary picture with notepad++ and it's without any error a true png picture.

Answer 1

In modern browsers you can use Data URI, and in IE use server-side script to decode given string, in php it would look like :

<?php
 header('Content-type: image/png');
 echo base64_decode($_GET['b']);
?>

Answer 2

Yes, thx a lot, DATA URI did the job

Answer 3

Hi,

IE has a limit on the image size displayed using DataURI

Does the jQuery method work around this?

Have you tried it?