Html 镶入 图片 Base64 编码

因工作需要需要将html页面中的图片镶入页面中。

上网看了两三个例子。其都有点错误。

随便写如下的内容

验证的环境jre6eclipsehelios

其中有例子如

Html代码

<h3>hellohtml5</h3>

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

其中的例子指出iVBORw...后面的信息就是图片的信息,即输出的必跟在其后。

实际环境IE9中

编写的

(并不是前缀带有iVBORw),其中data:image/jpg;base64,后面的字符可根据Base64的实现工具类encode

如BASE64Encoderencoder=newBASE64Encoder();

encoder.encode(bytes);//bytes类型为byte[]为图片文件流读取的二进制数组

验证生成的base64编码图片html页面

html代码如下

<imgsrc="data:image/jpg;base64,R0lGODlhMAAwAPcAAOf1/XqHjtnHu//78694aP3axPvb1f3r2/rSvauZlpBGLJijpvn//82CZ+zd

2emllfPz9Pm5qv/+/7lqUv7UwLjIzbpkTbm7vNjj6v3r1cl8af7z7f7w3LmJev318/7r49TMydaI

a8WKcfzk2oqaoaFbQsmVj4WTmpJXSP3OvdWNcfr6+9iReJSco6Smqf/5+deyqNXc57K8xNfk9v/x

4/3u6sZrVcnT13F0d+3j161pVfz8/Ovr6/vNxf7ezv36/f/k0f/++/XUwbqjlsR0XPjGr/TZzPTK

tMiVfJqrs8fIydeciP/8//bp4sNzU+SWeP///f7YyuO6rbxxU/Xq02gzI9J8ZP/dyfPgyue/u/7h

zfXk0dR9Xfz//4aFiNejk+3Wx+TTzHQrE/n5/cW0qenRuoSOlPn++uzNwuTNyplkV/TEsvfaxOvT

zJSYmLiBbODFuqhiTf/m1fT89P/h0bt0W9i3s/Hs6dDR0baoo4xuae/Pu/b//97SzNSnoeXRx4+h

qs6ckfX3/P/86v/fy+S8pMi7ueLh4fX/+cp1Wv/7+qissNmxm9iqjvb7/Pneyfnn1oI8Iurj4ezE

tf7nzt/LvnR+g8LO0vXy49ve3855XfHKu/rayOm8rfj3+ePPw/7g1eHt9MWqpPv8/uXCrevbzvH/

//z8+uCzosx/U9PV2bNyUODFstTb3Pni0t/m7PL7+v79/f/bzfrizu21n//45O7w8Pz/+v/iyPrW

xv/99/rnzvHp2dCDWvjd0P7m4JyJgdnV1ch1Vbx5YvjMsODHwU1JTfvDsOrJtqB+Y7VvXp2Eef//

9/T5++bo7frj1sd7XvKrn+3ew6pyX/n/8bF4W/zgys+xnvPj4/DFvPf38aOdn8BvU/XVy/zczvHo

17+DX/fvyu7ivPjt7e7t4cN6UePizp6wuNOTb+PY0cyJgfy7rdKNf7x3TufLs+jIvvz89r+WgKGJ

f92el9HCvNXDr/L7//L/+8GfjOarpcWqmfvqzrx3Vt62qvjlyf///yH/C1hNUCBEYXRhWE1QPD94

cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1w

bWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4w

LWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4

bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8

cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBSaWdodHM9Imh0dHA6Ly9ucy5h

ZG9iZS5jb20veGFwLzEuMC9yaWdodHMvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNv

bS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9z

VHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4w

LyIgeG1wUmlnaHRzOk1hcmtlZD0iRmFsc2UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDgw

QTlFOTBEMzk2MTFERkIxNThDQjI1NzNFODVBQ0QiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6

NDgwQTlFOEZEMzk2MTFERkIxNThDQjI1NzNFODVBQ0QiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUg

UGhvdG9zaG9wIENTMiBXaW5kb3dzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNl

SUQ9InhtcC5paWQ6RjY1MDdFQzlEMkI1MTFERjlFRkRCNkM3MjRCQTI1M0IiIHN0UmVmOmRvY3Vt

ZW50SUQ9InhtcC5kaWQ6RjY1MDdFQ0FEMkI1MTFERjlFRkRCNkM3MjRCQTI1M0IiLz4gPC9yZGY6

RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B

//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjH

xsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+O

jYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZV

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

54EnHAEBW9jiDpKAOA/mYAuGN9wWGAV0UgICADs=">

其中的DataURIscheme(RFC2397)支持的类型如下

data:,文本数据

data:text/plain,文本数据

data:text/html,HTML代码

data:text/html;base64,base64编码的HTML代码

data:text/css,CSS代码

data:text/css;base64,base64编码的CSS代码

data:text/javascript,Javascript代码

data:text/javascript;base64,base64编码的Javascript代码

data:image/gif;base64,base64编码的gif图片数据

data:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据

具体可参考http://www.ietf.org/rfc/rfc2397.txt《The"data"URLscheme》

相关推荐