1. 程式人生 > >Base64編碼 及 在HTML中用Base編碼直接顯示圖片或嵌入其他檔案型別

Base64編碼 及 在HTML中用Base編碼直接顯示圖片或嵌入其他檔案型別

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