Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Receive Image data as JSON and injecting it into the DOM

Tags:

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õÉ­Ä
like image 355
vignesh Avatar asked Feb 15 '11 06:02

vignesh


People also ask

Can we pass image in JSON?

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.


2 Answers

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/

like image 112
philwinkle Avatar answered Sep 30 '22 23:09

philwinkle


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?

like image 24
NoName Avatar answered Oct 01 '22 00:10

NoName