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õÉÄ
An image is of the type "binary" which is none of those. So you can't directly insert an image into JSON. What you can do is convert the image to a textual representation which can then be used as a normal string. The most common way to achieve that is with what's called base64.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With