Javascript 以 JSON 格式接收图像数据并将其注入到 DOM 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5000710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Receive Image data as JSON and injecting it into the DOM
提问by vignesh
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 ...
我正在将图像打包成 JSON 并将其发送给客户端......在客户端我希望将此数据显示为图像......
I am not sending the Image URL via JSON ... I am trying to send the whole image data itself
我不是通过 JSON 发送图像 URL ......我正在尝试发送整个图像数据本身
JSON image data that I receive in the client looks like this:
我在客户端收到的 JSON 图像数据如下所示：
PNG ?a\I??>ó4?ˉwc?LóQ?Y?Haè?nò)?￡M?àí.j3μx?ê#ì{T?±N???j$-?N¨e?y??R$id'|yp?c?{?yY'àt?b|??1¨:ó?}@?àd?é-?
采纳答案by philwinkle
You can accomplish this with data URL's in all browsers save for IE7 and below. The basic format is this:
您可以在所有浏览器中使用数据 URL 完成此操作，除了 IE7 及更低版本。基本格式是这样的：
<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/
您可以在此处阅读更多相关信息：http: //www.websiteoptimization.com/speed/tweak/inline-images/
回答by NoName
I don't know how elegant your solution is, but you could encode the image as BASE64 and inline it using:
我不知道您的解决方案有多优雅，但您可以将图像编码为 BASE64 并使用以下方法将其内联：
<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?
值得一提的是，BASE64 编码增加了大约 33% 的开销。相反，您可能会在您的服务器上创建一些临时目录，在那里存储此类图像并在请求后删除它们？
回答by mplungjan
You cannot send binary data to the browser inside JSON.
您不能在 JSON 中将二进制数据发送到浏览器。
You can use b64 encoding and the DataURI (MDC) (Wikipedia) in a browser that understands it
您可以在理解它的浏览器中使用 b64 编码和 DataURI ( MDC) ( Wikipedia)
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" />
由于我的帖子之后的评论都有一个实际例子，这里是维基百科的一个：<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
Alternatively convert to SVGwhich is also textual
或者转换为SVG，这也是文本
