接收图像数据作为JSON并将其注入DOM

时间:2011-02-15 06:58:10

标签: javascript jquery image

我将图像打包成jSON并将其发送到客户端....在客户端,我希望将此数据显示为图像......

我没有通过JSON发送图片网址...我正在尝试自己发送整个图片数据

我在客户端收到的JSON图像数据如下所示:

PNG  Ûâ\IÂØ>ó4ã¯wcÏLÓQÆÝîHâèÖnò)©£M¡ÀÍ.j3µx¼ê#Ì{Þ±NÔÃïj$­©N¨eÃyßÆR$id'|ýpøcå{ãyY'àþ½b|äô¹¨:Óç}@ÖÀdõÉ­Ä

3 个答案:

答案 0 :(得分:18)

除了IE 7及更低版本,您可以使用所有浏览器中的数据URL来完成此操作。基本格式是:

<img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7">

您可以在此处详细了解:http://www.websiteoptimization.com/speed/tweak/inline-images/

答案 1 :(得分:6)

我不知道您的解决方案有多优雅,但您可以将图像编码为BASE64并使用以下内联编码:

<img src="data:image/png;base64,BASE64_ENCODED_DATA_HERE">

值得注意的是,BASE64编码增加了大约33%的开销。相反,您可以在服务器上创建一些临时目录,在那里存储这些图像并在请求后删除它们?

答案 2 :(得分:4)

您无法将二进制数据发送到JSON内的浏览器。

您可以在了解它的浏览器中使用b64编码和DataURI(MDC)(Wikipedia

由于我的帖子后面的评论都有一个实际的例子,这里有一个来自维基百科: <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

或者转换为SVG,也是文字