How to display 'Base64' encoded image in Adobe AIR application using Javascript/HTML

Question

Hello All, I'm having some issues while displaying a 'Base64' encoded image in my AIR application. I'm fetching an image, which is 'Base64' encoded string, in a XML through a web service. At application side I'm able to decode it, but its not been able to display the image on the fly. A little search on Google gave me various result, but not pertaining to my problem, because most of them are related to Flex. My queries are: 1) After decoding the 'Base64' string, do I need to convert this to a PNG image using some PNG encoder? if so, then how can I use a PNGEncoder in my Adobe AIR HTML/Javascript application. is there any API or so? 2) Since the image I'm fetching from the web server is an icon, I'm setting it as a 'src' value for the element which I'm creating dynamically as follows:

      var category_header_img = new Element('img', 
  {
   'id': 'category_header_img' + this.SelectedCategoryID,
   'class': 'category_header_img',
   'src': 'data:image/png;base64,'+categoryIconBytes,
   'cat_id': this.SelectedCategoryID

  });

I'd found this solution, 'src': 'data:image/png;base64,'+categoryIconBytes somewhere which tried to use but it didn't work.(where, categoryIconBytes is the 'Base64' encoded string)

Please, help to solve this issue. I'll be really grateful for any of your suggestions. Thanks.

Answer 1

What <img> tag does this code produce?

I've been comparing it to an example which doesn't use Javascript, and since I'm not really familiar with JS, I can't spot any errors.

But the example I found closed the encoded string with " and followed it with ALT WIDTH and HEIGHT attributes. Does your code complete the tag properly?

I suppose I should be careful, in my ignorance, not to assume a complete correspondence between the 'id', 'class', 'src' and 'cat_id' elements and the final HTML. What does 'cat_id' mean?

Answer 2

The data URL scheme isn't supported in AIR. What was the image before it was base64 encoded? If it is already a PNG, then all you need to do is reverse the base 64 encoding and save it locally to a temporary file. You should then be able to load it with an image tag.