Base64编码 及 在HTML中用Base编码直接显示图片或嵌入其他文件类型

时间:2024-03-05 16:39:34

1.为什么要用到BASE64编码的图片信息 
    Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64 主要不是加密,它主要的用途是把一些二进制数转成普通字符用于网络传输。由于一些二进制字符在传输协议中属于控制字符,不能直接传送需要转换一下。最常见的用途是作为电子邮件或WebService附件的传输编码. 
2.base64编码定义 
  目前的internet e-mail标准--简单邮件传递协议(smtp)在rfc821中规定了两条重要但不难实现的限制: 
        1)邮件的内容必须全部为7-比特的美国ascii码。 
        2)每一行的长度不能超过1000的字符。 
    因此为了通过smtp用e-mail进行传送,内存的序列化对象必须转化为和以上相容的格式。 
    rfc1521提供了一个可行的方案。它定义了邮件的内容部分,使之能包涵多种形式的数据。这种标准就是目前众所周知的mime。 
  按照rfc1521编码过程为:输入是24个比特,输出是4个字节。24个比特输入组从左至右 由3个8比特的输入组形成。这24个比特被看成4个连续的6比特组,而每个6比特输入组被翻译为base64码表中的一个数字。依次反复不断进行,直到全部输入数据转换完成。 
    如果最后剩下两个输入数据,在编码结果后加1个“=”;如果最后剩下一个输入数据,编码结果后加2个“=”;如果没有剩下任何数据,就什么都不要加,这样才可以保证资料还原的正确性。 
    完整的base64定义可见 RFC1421和 RFC2045。编码后的数据比原始数据略长,为原来的4/3。在电子邮件中,根据RFC822规定,每76个字符,还需要加上一个回车换行。可以估算编码后数据长度大约为原长的135.1%。 



3.如何进行base64编码 
   Base64 使用US-ASCII子集的65个字符, 每个字符用6位表示 
   对于文本串,编码过程如下。例如"men": 
   先转成US-ASCII值. 

   "m"十进制 109 
   "e"十进制 101 
   "n"十进制 110 
   二进制 : 
   m 01101101 
   e 01100101 
   n 01101110 

   三个8位连起来是24位 
   011011010110010101101110 

   然后分成4个6位 
   011011 010110 010101 101110 

   现在得到4个值,十进制为 
   27 22 21 46 

对应的 Base64 字符是 : b W V u 
编码总是基于3个字符,从而产生4个Base64字符。 

如果只是2个字符的数据,使用特殊字符"="补齐Base64的4字。 
如,编码"me" 
01101101 01100101 
0110110101100101 
011011 010110 0101 
111111 (与,补足6位) 
011011 010110 010100 
b W U 
b W U = ("=" 补足4字符) 
于是 "bWU=" 就是"me"的Base64值. 

如果只是2个字符的数据,如编码 "m" 
01101101 
011011 01 
111111 
011011 010000 
b Q = = 
于是 "bQ==" 就是"m"的Base64值. 



4.显示被存储为Base64编码字符串的图片的例子 
1)使用data: URI直接在网页中嵌入. 
data: URI定义于IETF标准的RFC 2397 
data: URI的基本使用格式如下: 
data:[<MIME-type>][;base64|charset=some_charset],<data> 
mime-type是嵌入数据的mime类型,比如png图片就是image/png。 
如果后面跟base64,说明后面的data是采用base64方式进行编码的

这种方法可以将任何文件嵌入到你的网页中,如HTM/HTML,主要代码:\'data:text/html;base64,+你的编码\'

下面给出MIME-Type 列表(文件类型参照):
123 application/vnd.lotus-1-2-3 
3gp video/3gpp 
aab application/x-authoware-bin 
aam application/x-authoware-map 
aas application/x-authoware-seg 
ai application/postscript 
aif audio/x-aiff 
aifc audio/x-aiff 
aiff audio/x-aiff 
als audio/X-Alpha5 
amc application/x-mpeg 
ani application/octet-stream 
asc text/plain 
asd application/astound 
asf video/x-ms-asf 
asn application/astound 
asp application/x-asap 
asx video/x-ms-asf 
au audio/basic 
avb application/octet-stream 
avi video/x-msvideo 
awb audio/amr-wb 
bcpio application/x-bcpio 
bin application/octet-stream 
bld application/bld 
bld2 application/bld2 
bmp application/x-MS-bmp 
bpk application/octet-stream 
bz2 application/x-bzip2 
cal image/x-cals 
ccn application/x-cnc 
cco application/x-cocoa 
cdf application/x-netcdf 
cgi magnus-internal/cgi 
chat application/x-chat 
class application/octet-stream 
clp application/x-msclip 
cmx application/x-cmx 
co application/x-cult3d-object 
cod image/cis-cod 
cpio application/x-cpio 
cpt application/mac-compactpro 
crd application/x-mscardfile 
csh application/x-csh 
csm chemical/x-csml 
csml chemical/x-csml 
css text/css 
cur application/octet-stream 
dcm x-lml/x-evm 
dcr application/x-director 
dcx image/x-dcx 
dhtml text/html 
dir application/x-director 
dll application/octet-stream 
dmg application/octet-stream 
dms application/octet-stream 
doc application/msword 
dot application/x-dot 
dvi application/x-dvi 
dwf drawing/x-dwf 
dwg application/x-autocad 
dxf application/x-autocad 
dxr application/x-director 
ebk application/x-expandedbook 
emb chemical/x-embl-dl-nucleotide 
embl chemical/x-embl-dl-nucleotide 
eps application/postscript 
eri image/x-eri 
es audio/echospeech 
esl audio/echospeech 
etc application/x-earthtime 
etx text/x-setext 
evm x-lml/x-evm 
evy application/x-envoy 
exe application/octet-stream 
fh4 image/x-freehand 
fh5 image/x-freehand 
fhc image/x-freehand 
fif image/fif 
fm application/x-maker 
fpx image/x-fpx 
fvi video/isivideo 
gau chemical/x-gaussian-input 
gca application/x-gca-compressed 
gdb x-lml/x-gdb 
gif image/gif 
gps application/x-gps 
gtar application/x-gtar 
gz application/x-gzip 
hdf application/x-hdf 
hdm text/x-hdml 
hdml text/x-hdml 
hlp application/winhlp 
hqx application/mac-binhex40 
htm text/html 
html text/html 
hts text/html 
ice x-conference/x-cooltalk 
ico application/octet-stream 
ief image/ief 
ifm image/gif 
ifs image/ifs 
imy audio/melody 
ins application/x-NET-Install 
ips application/x-ipscript 
ipx application/x-ipix 
it audio/x-mod 
itz audio/x-mod 
ivr i-world/i-vrml 
j2k image/j2k 
jad text/vnd.sun.j2me.app-descriptor 
jam application/x-jam 
jar application/java-archive 
jnlp application/x-java-jnlp-file 
jpe image/jpeg 
jpeg image/jpeg 
jpg image/jpeg 
jpz image/jpeg 
js application/x-javascript 
jwc application/jwc 
kjx application/x-kjx 
lak x-lml/x-lak 
latex application/x-latex 
lcc application/fastman 
lcl application/x-digitalloca 
lcr application/x-digitalloca 
lgh application/lgh 
lha application/octet-stream 
lml x-lml/x-lml 
lmlpack x-lml/x-lmlpack 
lsf video/x-ms-asf 
lsx video/x-ms-asf 
lzh application/x-lzh 
m13 application/x-msmediaview 
m14 application/x-msmediaview 
m15 audio/x-mod 
m3u audio/x-mpegurl 
m3url audio/x-mpegurl 
ma1 audio/ma1 
ma2 audio/ma2 
ma3 audio/ma3 
ma5 audio/ma5 
man application/x-troff-man 
map magnus-internal/imagemap 
mbd application/mbedlet 
mct application/x-mascot 
mdb application/x-msaccess 
mdz audio/x-mod 
me application/x-troff-me 
mel text/x-vmel 
mi application/x-mif 
mid audio/midi 
midi audio/midi 
mif application/x-mif 
mil image/x-cals 
mio audio/x-mio 
mmf application/x-skt-lbs 
mng video/x-mng 
mny application/x-msmoney 
moc application/x-mocha 
mocha application/x-mocha 
mod audio/x-mod 
mof application/x-yumekara 
mol chemical/x-mdl-molfile 
mop chemical/x-mopac-input 
mov video/quicktime 
movie video/x-sgi-movie 
mp2 audio/x-mpeg 
mp3 audio/x-mpeg 
mp4 video/mp4 
mpc application/vnd.mpohun.certificate 
mpe video/mpeg 
mpeg video/mpeg 
mpg video/mpeg 
mpg4 video/mp4 
mpga audio/mpeg 
mpn application/vnd.mophun.application 
mpp application/vnd.ms-project 
mps application/x-mapserver 
mrl text/x-mrml 
mrm application/x-mrm 
ms application/x-troff-ms 
mts application/metastream 
mtx application/metastream 
mtz application/metastream 
mzv application/metastream 
nar application/zip 
nbmp image/nbmp 
nc application/x-netcdf 
ndb x-lml/x-ndb 
ndwn application/ndwn 
nif application/x-nif 
nmz application/x-scream 
nokia-op-logo image/vnd.nok-oplogo-color 
npx application/x-netfpx 
nsnd audio/nsnd 
nva application/x-neva1 
oda application/oda 
oom application/x-AtlasMate-Plugin 
pac audio/x-pac 
pae audio/x-epac 
pan application/x-pan 
pbm image/x-portable-bitmap 
pcx image/x-pcx 
pda image/x-pda 
pdb chemical/x-pdb 
pdf application/pdf 
pfr application/font-tdpfr 
pgm image/x-portable-graymap 
pict image/x-pict 
pm application/x-perl 
pmd application/x-pmd 
png image/png 
pnm image/x-portable-anymap 
pnz image/png 
pot application/vnd.ms-powerpoint 
ppm image/x-portable-pixmap 
pps application/vnd.ms-powerpoint 
ppt application/vnd.ms-powerpoint 
pqf application/x-cprplayer 
pqi application/cprplayer 
prc application/x-prc 
proxy application/x-ns-proxy-autoconfig 
ps application/postscript 
ptlk application/listenup 
pub application/x-mspublisher 
pvx video/x-pv-pvx 
qcp audio/vnd.qcelp 
qt video/quicktime 
qti image/x-quicktime 
qtif image/x-quicktime 
r3t text/vnd.rn-realtext3d 
ra audio/x-pn-realaudio 
ram audio/x-pn-realaudio 
rar application/x-rar-compressed 
ras image/x-cmu-raster 
rdf application/rdf+xml 
rf image/vnd.rn-realflash 
rgb image/x-rgb 
rlf application/x-richlink 
rm audio/x-pn-realaudio 
rmf audio/x-rmf 
rmm audio/x-pn-realaudio 
rmvb audio/x-pn-realaudio 
rnx application/vnd.rn-realplayer 
roff application/x-troff 
rp image/vnd.rn-realpix 
rpm audio/x-pn-realaudio-plugin 
rt text/vnd.rn-realtext 
rte x-lml/x-gps 
rtf application/rtf 
rtg application/metastream 
rtx text/richtext 
rv video/vnd.rn-realvideo 
rwc application/x-rogerwilco 
s3m audio/x-mod 
s3z audio/x-mod 
sca application/x-supercard 
scd application/x-msschedule 
sdf application/e-score 
sea application/x-stuffit 
sgm text/x-sgml 
sgml text/x-sgml 
sh application/x-sh 
shar application/x-shar 
shtml magnus-internal/parsed-html 
shw application/presentations 
si6 image/si6 
si7 image/vnd.stiwap.sis 
si9 image/vnd.lgtwap.sis 
sis application/vnd.symbian.install 
sit application/x-stuffit 
skd application/x-Koan 
skm application/x-Koan 
skp application/x-Koan 
skt application/x-Koan 
slc application/x-salsa 
smd audio/x-smd 
smi application/smil 
smil application/smil 
smp application/studiom 
smz audio/x-smd 
snd audio/basic 
spc text/x-speech 
spl application/futuresplash 
spr application/x-sprite 
sprite application/x-sprite 
spt application/x-spt 
src application/x-wais-source 
stk application/hyperstudio 
stm audio/x-mod 
sv4cpio application/x-sv4cpio 
sv4crc application/x-sv4crc 
svf image/vnd 
svg image/svg-xml 
svh image/svh 
svr x-world/x-svr 
swf application/x-shockwave-flash 
swfl application/x-shockwave-flash 
t application/x-troff 
tad application/octet-stream 
talk text/x-speech 
tar application/x-tar 
taz application/x-tar 
tbp application/x-timbuktu 
tbt application/x-timbuktu 
tcl application/x-tcl 
tex application/x-tex 
texi application/x-texinfo 
texinfo application/x-texinfo 
tgz application/x-tar 
thm application/vnd.eri.thm 
tif image/tiff 
tiff image/tiff 
tki application/x-tkined 
tkined application/x-tkined 
toc application/toc 
toy image/toy 
tr application/x-troff 
trk x-lml/x-gps 
trm application/x-msterminal 
tsi audio/tsplayer 
tsp application/dsptype 
tsv text/tab-separated-values 
tsv text/tab-separated-values 
ttf application/octet-stream 
ttz application/t-time 
txt text/plain 
ult audio/x-mod 
ustar application/x-ustar 
uu application/x-uuencode 
uue application/x-uuencode 
vcd application/x-cdlink 
vcf text/x-vcard 
vdo video/vdo 
vib audio/vib 
viv video/vivo 
vivo video/vivo 
vmd application/vocaltec-media-desc 
vmf application/vocaltec-media-file 
vmi application/x-dreamcast-vms-info 
vms application/x-dreamcast-vms 
vox audio/voxware 
vqe audio/x-twinvq-plugin 
vqf audio/x-twinvq 
vql audio/x-twinvq 
vre x-world/x-vream 
vrml x-world/x-vrml 
vrt x-world/x-vrt 
vrw x-world/x-vream 
vts workbook/formulaone 
wav audio/x-wav 
wax audio/x-ms-wax 
wbmp image/vnd.wap.wbmp 
web application/vnd.xara 
wi image/wavelet 
wis application/x-InstallShield 
wm video/x-ms-wm 
wma audio/x-ms-wma 
wmd application/x-ms-wmd 
wmf application/x-msmetafile 
wml text/vnd.wap.wml 
wmlc application/vnd.wap.wmlc 
wmls text/vnd.wap.wmlscript 
wmlsc application/vnd.wap.wmlscriptc 
wmlscript text/vnd.wap.wmlscript 
wmv audio/x-ms-wmv 
wmx video/x-ms-wmx 
wmz application/x-ms-wmz 
wpng image/x-up-wpng 
wpt x-lml/x-gps 
wri application/x-mswrite 
wrl x-world/x-vrml 
wrz x-world/x-vrml 
ws text/vnd.wap.wmlscript 
wsc application/vnd.wap.wmlscriptc 
wv video/wavelet 
wvx video/x-ms-wvx 
wxl application/x-wxl 
x-gzip application/x-gzip 
xar application/vnd.xara 
xbm image/x-xbitmap 
xdm application/x-xdma 
xdma application/x-xdma 
xdw application/vnd.fujixerox.docuworks 
xht application/xhtml+xml 
xhtm application/xhtml+xml 
xhtml application/xhtml+xml 
xla application/vnd.ms-excel 
xlc application/vnd.ms-excel 
xll application/x-excel 
xlm application/vnd.ms-excel 
xls application/vnd.ms-excel 
xlt application/vnd.ms-excel 
xlw application/vnd.ms-excel 
xm audio/x-mod 
xml text/xml 
xmz audio/x-mod 
xpi application/x-xpinstall 
xpm image/x-xpixmap 
xsit text/xml 
xsl text/xml 
xul text/xul 
xwd image/x-xwindowdump 
xyz chemical/x-pdb 
yz1 application/x-yz1 
z application/x-compress 
zac application/x-zaurus-zac 
zip application/zip

源:http://hi.baidu.com/aidan_w/blog/item/ca9ad7bdb4b4260118d81f61.html