HTTP协议返回图片时的疑问

linux_c_py_php

base64那是不可能的，流量谁玩的起，压缩图片还来不及呢，还base64，更不可能是标准。

glq2000

回复 15# pearma


    多谢pearma解惑，确实 “编码”一词才是准确的。

glq2000

回复 21# linux_c_py_php


    我wireshark抓包看一下

glq2000

回复 18# OwnWaterloo


    就是直接访问http://123.125.87.77/softfile.3g ... p;f=178a&p=.png ，按下F12弹出开发人员工具，然后按ctrl+F5强刷新，观察network就行了。

glq2000

回复 20# xinglp


    3x to xinglp

    恩 我用抓包看了一下，返回的图片的确是二进制格式的。如下两张图：
   
   
   

   

     所以的确是chrome把图片转为了base64了。
     我还找了一个把图片转为base64的网站转了下，发现和chrome里展示的是一样的。
     
     但奇怪的是浏览器为什么要这么做呢？

glq2000

回复 15# pearma


    我抓包看了下，服务器回传的是二进制的图。
    截图见 25楼。

    不过很奇怪chrome为啥要自己转为base64来给用户看，可能是chrome有用吧。。。

    thanks a lot.

glq2000

linux_c_py_php 发表于 2013-12-09 10:22
base64那是不可能的，流量谁玩的起，压缩图片还来不及呢，还base64，更不可能是标准。

恩。。。 说的是

OwnWaterloo

回复 24# glq2000

之前机器上的Chrome版本比较低。

1. 
   
2. $ chromium-browser --version
   
3. Chromium 25.0.1364.160 Ubuntu 12.04
   

复制代码

换了一个版本较高的Chrome就出现你说的情况了。

1. 
   
2. $ chromium-browser --version
   
3. Chromium 30.0.1599.114 Ubuntu 12.04
   

复制代码

Chrome没有发送一些奇怪的header使得 http://123.125.87.77/softfile.3g.qq.com/msoft/sec/dp/2.png 产生的响应会用base64对body进行编码。
高版本的Chrome只是在console里显示body按base64编码后的结果。 不知道意义何在。。。 反正人都读不懂。。。 还不如像原来那样显示缩略图。。。

响应的header表明类型是image/png，长度是11561。 Chrome里看到的也是这两个值：

1. 
   
2. $ curl -sI http://123.125.87.77/softfile.3g.qq.com/msoft/sec/dp/2.png | sed -n '/^Content/p'
   
3. Content-Type: image/png
   
4. Content-Length: 11561
   

复制代码

实际body长度是吻合的：

1. 
   
2. $ curl -s http://123.125.87.77/softfile.3g.qq.com/msoft/sec/dp/2.png | wc -c
   
3. 11561
   

复制代码

而如果按base64编码长度会是15416才对：

1. 
   
2. $ curl -s http://123.125.87.77/softfile.3g.qq.com/msoft/sec/dp/2.png | base64 -w0 | wc -c
   
3. 15416
   

复制代码

base64编码后的前几个字符同Chrome里看到的是一样的：

1. 
   
2. $ curl -s http://123.125.87.77/softfile.3g.qq.com/msoft/sec/dp/2.png | base64 -w0 2>/dev/null | head -c12
   
3. iVBORw0KGgoA
   

复制代码

OwnWaterloo

base64和http还是有一些关系的：
data URI scheme的维基页面里有一个例子：

1. 
   
2. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
   
3. AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
   
4. 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
   

复制代码

试试CU能不能把这段嵌到img的src里：
如果成功的话这会显示一个红点。

OwnWaterloo

看来不行。。。 CU会添加http协议。。。
更多在线例子在这里： datatests。
里面有一个png白色小方块。