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

Dear @Gunnar Hoffman please see my question: stackoverflow.com/questions/34963963/… — Hosein Aqajani
– Hosein Aqajani, Commented Jan 25, 2016 at 7:12

Andrew · Accepted Answer · 2010-06-09 22:29:57Z

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..." />

answered Jun 9, 2010 at 22:29

Andrew

14.5k15 gold badges67 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Andrew Over a year ago

It does. It may not work in some applications, but web applications should have no problem. Give it a whirl. Very easy to implement.

Pointy Over a year ago

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.

Gunnar Hoffman Over a year ago

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: <img src=\"data:image/jpeg;hex," + hexString + "\">"

Gunnar Hoffman Over a year ago

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.

Hosein Aqajani Over a year ago

Dear @Andrew please see my question: stackoverflow.com/questions/34963963/…

Tobias Reithmeier · Accepted Answer · 2010-06-09 22:24:22Z

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.../>

answered Jun 9, 2010 at 22:24

Tobias Reithmeier

6818 silver badges19 bronze badges

5 Comments

Ken Browning Over a year ago

Would the response headers also need to indicate which format the image is in? (e.g. gif, jpg, png)

Gabriele Petrioli Over a year ago

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 ..

Tobias Reithmeier Over a year ago

I think so, yes. But you could pass it to the php file via GET, too and set it there dynamically.

Tobias Reithmeier Over a year ago

@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.

Gabriele Petrioli Over a year ago

indeed that would be more feasible. Sounds like an interesting concept:)

Collectives™ on Stack Overflow

Javascript Hex String to Image

2 Answers 2

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related