zoukankan      html  css  js  c++  java
  • 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

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



    返回导读目录,阅读更多随笔



    分割线,以下为博客签名:

    软件臭虫情未了
    • 编码一分钟
    • 测试十年功


    随笔如有错误或不恰当之处、为希望不误导他人,望大侠们给予批评指正。

  • 相关阅读:
    github 访问速度慢 的解决+个人理解
    phpstorm 编辑器进行自动的注释添加
    输入框只能输入数字(最好用)
    数组去重(根据对象属性去重)
    mac安装Homebrew和 tree
    vue中 .sync 的作用
    打包 vue 组件为 webcomponent
    Android开发之SharedPreferences
    Android开发之SharedPreferences扩展以及File
    Android 开发之SQLite基础
  • 原文地址:https://www.cnblogs.com/08shiyan/p/2023502.html
Copyright © 2011-2022 走看看