日期:2014-05-17  浏览次数:20650 次

html文件中嵌入图片

在一个网页中,嵌入一张图片,通常的做法是<img src="http://xxx.com/aa.png"> ,但是这样当页面加载时,如果url属于当前域名,则先开一个 http请求; 否则就要先建一个TCP连接了。 能否将一张图片的数据直接嵌入到html 中呢? 答案是可以的。

?

方法:

生成一个a.html文件,内容如下:

?

<h3>hello html5</h3>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAALVBMVEXM3fm+1Pfb5/rF2fjw9f23z/aavPOhwfTp8PyTt/L3+v7T4vqMs/K7zP////+qRWzhAAAAXElEQVQIW2O4CwUM996BwVskxtOqd++2rwMyPI+ve31GD8h4Madqz2mwms5jZ/aBGS/mHIDoen3m+DowY8/hOVUgxusz+zqPg7SvPA1UxQfSvu/du0YUK2AMmDMA5H1qhVX33T8AAAAASUVORK5CYII=">

?

用chrome浏览器打开,即可以看到一张图片,但它却没有新建一个http(TCP)链接!可以右键保存生成的图片。

?

其中,iVBORw...后面的信息就是图片的信息,它是怎么得来的呢?

如,一张图片叫 a.jpg

使用python,生成这些信息

?

r = open('a.jpg','rb')
s = r.read()
r.close()

print s.encode('base64')

?

即可获取 ?iVBORw...

?