2

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

Gunnar Hoffman
  • 1,226
  • 1
  • 11
  • 11
  • Dear @Gunnar Hoffman please see my question: http://stackoverflow.com/questions/34963963/converting-a-hex-string-of-a-raw-image-to-a-bitmap-image-in-javascript – Hosein Aqajani Jan 25 '16 at 07:12

2 Answers2

9

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..." />
Andrew
  • 14,204
  • 15
  • 60
  • 104
  • It does. It may not work in some applications, but web applications should have no problem. Give it a whirl. Very easy to implement. – Andrew Jun 09 '10 at 22:37
  • Are you *sure* that IE supports "data:" URLs? Everything I've read suggests that IE supports something that's kind-of similar, but definitely different. – Pointy Jun 09 '10 at 23:16
  • Thanks for your quick reply. I've tried your suggestion because it matches what I had in mind the closest but my implementation fails to work, can you pick out my error? var hexString = "FFD8FFE000104A..."; document.getElementById("output").innerHTML = "Picture: " – Gunnar Hoffman Jun 10 '10 at 00:05
  • I should also clarify that by cross browser I mean the newest versions. Because of the nature of my user base I have the ability to guarantee that they have such software. – Gunnar Hoffman Jun 10 '10 at 00:11
  • Dear @Andrew please see my question: http://stackoverflow.com/questions/34963963/converting-a-hex-string-of-a-raw-image-to-a-hex-string-of-a-bitmap-image-in-java – Hosein Aqajani Jan 23 '16 at 14:46
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.../>
Tobias Reithmeier
  • 681
  • 8
  • 18
  • Would the response headers also need to indicate which format the image is in? (e.g. gif, jpg, png) – Ken Browning Jun 09 '10 at 22:25
  • 1
    also keep in mind that URL length is limited to ~2KB .. so there is a big limitations to what you can pass around through the URL .. – Gabriele Petrioli Jun 09 '10 at 22:32
  • I think so, yes. But you could pass it to the php file via GET, too and set it there dynamically. – Tobias Reithmeier Jun 09 '10 at 22:34
  • @Gaby: you are right. To make this solution even more complex (and I'm pretty sure, that there is no easy solution, as the "data:" way won't work on ie < 8 and is limited to 32kb, afaik) you could generate a ajax post request to the php file which updates your image/div. – Tobias Reithmeier Jun 09 '10 at 22:41
  • indeed that would be more feasible. Sounds like an interesting concept:) – Gabriele Petrioli Jun 10 '10 at 00:04