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:[][;base64|charset=some_charset],  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