I am packaging an image into jSON and sending it to the client .... On the client side I wish to display this data as a image ...
I am not sending the Image URL via JSON ... I am trying to send the whole image data itself
JSON image data that I receive in the client looks like this:
PNG Ûâ\IÂØ>ó4ã¯wcÏLÓQÆÝîHâèÖnò)©£M¡ÀÍ.j3µx¼ê#Ì{Þ±NÔÃïj$©N¨eÃyßÆR$id'|ýpøcå{ãyY'àþ½b|äô¹¨:Óç}@ÖÀdõÉÄ
You can accomplish this with data URL's in all browsers save for IE7 and below. The basic format is this:
<img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7">
You can read more about it here: http://www.websiteoptimization.com/speed/tweak/inline-images/
I don't know how elegant your solution is, but you could encode the image as BASE64 and inline it using:
<img src="data:image/png;base64,BASE64_ENCODED_DATA_HERE">
It might also be noteworthy to say, that BASE64 encoding adds about ~33% overhead. Instead, you might create some temporary directory on your server, where you store such images and delete them after the request?
You cannot send binary data to the browser inside JSON.
You can use b64 encoding and the DataURI (MDC) (Wikipedia) in a browser that understands it
Since the comments that came after my post all have an actual example, here is one from Wikipedia:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
Alternatively convert to SVG which is also textual