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
VFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0c
GxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAMAAwAAAI/wD/CRwo8Myt
IIqYMJEQ694ceB42eBjD4Ac9Mk0G/DMFQAKTWEGY6frXhaDJk/+0BYHyb5TAFW3s+DGhzsS8fGh6
xMPnY0SfH7AYSHjxQkJLlEj/KXoxio8pWCHfwQgkgkgiYcKGsagzRcSbDlEQ3TqlkMmPpEiZ/GNg
ig+UAUZYMUICrl25VL2sCOMSIlHXB5Vo6NrRpWQstCe7MGDQxUMbPx3qDIOmiYsmTYmsJLqcCBq0
Osq+GNHGh88Oo4gJMoCia0S/DsM0WJk9W4PtBrih4dbQQNOEDpUG3DqdmuAKRd2QDGuggkWIEA1C
sGjOTkWD6c6bP7EyTISUDVCaFf8fyCRNhwlcuDjhR4SIkwZPQlghMgU+dGjCnKB7El9dlhd8pAUF
NXMcdQsnHUxThxPcCMONDUTwA00iELrnhBOJcGPBFBPMx085vahgBAMGBTEWQ7EwAQUztxSWEjvK
cJOIX1MMs94qq0zhBH3cEDFBHDqIsAQSFnBTR4MT4GPiQVCcxpAEKwbRxRgepGOBBRQWSYQONlgw
AYcW2PCjDgQgUQgulJRBRBxxhDnBNG0EIScUQUggwVmnsMiAUn9MwY0TXnpJhA1xDLMEOzroMEwg
/eRyAAcZUJHBEfF0oMGVocm5UhCHxdLFKYMJNUA/OJZQDS0ssPnGNRl8Q8YQlXD/QAMNtdBwACTP
yMGBNGUUokwJcYjgwZxB7CAQA3LGwsAov3RgQQlvEFNAPPEQc0UGg2BCzgADYELDNznwwoEcsoAi
Ti0HPFKICEBKIqciUKwgECIISbCnAdOUwA4FQDxSQAGNKEOAPqXU8MEIB2xxQC0clIEPAQQ0ggAo
vmRAjAglgPACQk2SRK8iPzDgCRooiJCCHI/IcYQIkUSCRKSlPLrPBx9AgoUcQrwRiQIaROELFrjQ
EochG8NLWBeedOFIM0FsAIMeyFzByRUULKFAJGo0YYopYRhQgzY0cOCPOXzY4wAKCijwQAH+SGNN
B3k0sVRLLkng4h1/oCHFHpyw/wEEBSwroMYIQegCRy61kFNDw5UwI4EBaEfCAgKUYKEFKp9UkkOd
Lq0gwRj/QJHOJ3JMkssVQhByhM4loBDIBnLgI0Qtg4xDwx74SGQCCiUogMQR1rCRSydagPHJAJ4W
xsQYP7zQBxgcFJI6J3RcQcsbkqGggxrJ7MIBJuNscEUyHXSAggbVdLDGFUD4EIUUQMghAHj/CNJF
LB4xkY4AQLgziSw+8EYuUrCEfEVCDCggxSA2UIPwZYARKKiCAuIwjUYIgROciIIspCAHNAhAF1Do
wihctJBxhAEM9SAFAOngDR+s4QtAEgExOPCBJtRgAwewFSo68AYdMCIFnPCGN/9ksYdr/OEPDiiW
QCSAiC6chgkecAA9OiELb4CCDj6gAAVAQYwMcOAXNOMAB75xgBHEDwEFSAEQfQEKULCiHn0YhwRW
4JJTBAERjMkfExTRD1kYwRe+2EMnjtADUFCBFzX4BQ3CQYVa8IIGI6BDAY6wjk74ABTd8AYrqLCQ
lpREJUhpAxw4QYFjrOMBEdiELIDgikcd4AC/QNgBgHCFFEQgGtFYRwoogIY+eGA8AqlBJbpRgGNE
4wHRMF38IMFMSHzgGVuABBAIkYJOIJMWKYgCHPoQBGAqJQ1w6IEtaZHKXPgACLd6xjNG8AxIZEAO
hEDAGiIQgWNEAQ3F2ABqxiP/gQ2kIQviLIK0CKEFILBSDnIAhSu2wNBH5AIBRShCCoRQDGwwwRPe
HIMExlGMd+SCAggQwhWsAYRZzAKhBp0FFrYwC0JEgQIF8KADQLbP4ozCTuMAZ+oKcAU2kBQIWkDG
JK61Cyw8IoN0QMMnHFAUjHozCKcQyB3S8I4eXEELPtUCIYTAiHh0ghOPeIQWfCCLYgjAAUbpAp28
OQApwQIKyJGC9AqAi0cQAgibWF+/wooMGKRhAx9hgCNuwQxv3kkCGO0CAEIRjDyIohMUSEEB5IAL
CsgiG3YQRQIkwQNbKMYR/7CjYf+BPyicAg94cMY2DJEAPSwDGMCQxzL0oIcE/+RhG0oAAQgSG7pu
evMfUHpBE+iRjkW4AA9KcIMXcGAMY3ihBQG4gCpk0IJPCKAG3RzFDuQFTMXE4i0n5IALVNGKG1xi
AS2QAXWTkAQZnMAMZuAEGBygiyCMYoTeVNooYqEL/mlhG8HIxA1CQV37LYIElgiAGy6Qhz0A4YOK
IMlvoXAGEQaBHj44Qh4kkYlLvCIGF7iAEhZxgxtUoBU8uMA1XPFBo4zhMMCERwiR9jwpXMARGLhB
DEJxA0ss4BK2eAUeMBCKSwwBiXWyU01Tw4wgOEIoHijGNc4xAwDMoMoysIQMAICBGMwgFDOoQB76
8IKFeMJOoz2MBIxlC0uY4e4cFcCAKS6BAxmEAgAAuIF7LYEH4A7EWL/9h7xicZpDkCAJJDgBIM6x
gAAEoL3ncDQJAHEBNdspFjD2prGMsoJMvDkJgEh0C95rBhJM+hznAMQijEVoTo92n7E4RAAAQeta
n8C9tab1CRaxRNRkujjcXfMceRAAUx+aBGaowCuKjehJB0AJgs70khHD3Vh4whMQ4EELEvxeN2fC
GW7gthksYYlMrAACK8AfpkcL3BVg2xbOWEQLXLAAF1zgEMEYcQsWwG9V8AACEIiFvHbw6+LscwcA
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》