zoukankan      html  css  js  c++  java
  • html image -- data:image/png;base64

    1,  data:image/png;base64


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg" alt="image"></img>
     </body>
    </html>
    


    能够把上面 src 中的url 直接copy到浏览器地址栏中。


    Data URI scheme是在RFC2397中定义的。目的是将一些小的数据。直接嵌入到网页中,从而不用再从外部文件加载。

    比方上面那串字符,事实上是一张小图片。将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。

      在上面的Data URI中。data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
      眼下,Data URI scheme支持的类型有:
    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图片数据
      base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符。网上有非常多免费的base64 编码和解码的工具。在PHP中能够用函数base64_encode() 进行编码。如echo base64_encode(file_get_contents(‘wg.png’));

    眼下,IE8、Firfox、Chrome、Opera浏览器都支持这样的小文件嵌入。


    2, Base64简单介绍

    标准的Base64并不适合直接放在URL里传输。由于URL编码器会把标准Base64中的“/”和“+”字符变为形如“%XX”的形式。而这些“%”号在存入数据库时还须要再进行转换,由于ANSI SQL中已将“%”号用作通配符。
    为解决此问题,可採用一种用于URL的改进Base64编码。它不在末尾填充'='号,并将标准Base64中的“+”和“/”分别改成了“_”和“-”,这样就免去了在URL编解码和数据库存储时所要作的转换,避免了编码信息长度在此过程中的添加,并统一了数据库、表单等处对象标识符的格式。


    另有一种用于正則表達式的改进Base64变种。它将“+”和“/”改成了“!”和“-”,由于“+”,“*”以及前面在IRCu中用到的“[”和“]”在正則表達式中都可能具有特殊含义。
    此外另一些变种,它们将“+/”改为“_-”或“._”(用作编程语言中的标识符名称)或“.-”(用于XML中的Nmtoken)甚至“_:”(用于XML中的Name)。


    Base64要求把每三个8Bit的字节转换为四个6Bit的字节(3*8 = 4*6 = 24)。然后把6Bit再添两位高位0,组成四个8Bit的字节。也就是说,转换后的字符串理论上将要比原来的长1/3。


    规则
    关于这个编码的规则:
    ①.把3个字符变成4个字符。
    ②每76个字符加一个换行符。
    ③.最后的结束符也要处理。


    这样说会不会太抽象了?不怕,我们来看一个样例:
    转换前 11111111, 11111111, 11111111 (二进制)
    转换后 00111111, 00111111, 00111111, 00111111 (二进制)
    应该非常清楚了吧?上面的三个字节是原文,以下的四个字节是转换后的Base64编码。其前两位均为0。
    转换后,我们用一个码表来得到我们想要的字符串(也就是终于的Base64编码),这个表是这种:(摘自RFC2045)

    转换表
    Table 1: The Base64 Alphabet
    索引
    相应字符
    索引
    相应字符
    索引
    相应字符
    索引
    相应字符
    0
    A
    17
    R
    34
    i
    51
    z
    1
    B
    18
    S
    35
    j
    52
    0
    2
    C
    19
    T
    36
    k
    53
    1
    3
    D
    20
    U
    37
    l
    54
    2
    4
    E
    21
    V
    38
    m
    55
    3
    5
    F
    22
    W
    39
    n
    56
    4
    6
    G
    23
    X
    40
    o
    57
    5
    7
    H
    24
    Y
    41
    p
    58
    6
    8
    I
    25
    Z
    42
    q
    59
    7
    9
    J
    26
    a
    43
    r
    60
    8
    10
    K
    27
    b
    44
    s
    61
    9
    11
    L
    28
    c
    45
    t
    62
    +
    12
    M
    29
    d
    46
    u
    63
    /
    13
    N
    30
    e
    47
    v
       
    14
    O
    31
    f
    48
    w
       
    15
    P
    32
    g
    49
    x
       
    16
    Q
    33
    h
    50
    y
       
    举例
    让我们再来看一个实际的样例,加深印象。
    转换前 10101101,10111010,01110110
    转换后 00101011, 00011011 ,00101001 ,00110110
    十进制 43 27 41 54
    相应码表中的值 r b p 2
    所以上面的24位编码,编码后的Base64值为 rbp2
    解码同理,把 rbq2 的二进制位连接上再重组得到三个8位值,得出原码。

    (解码仅仅是编码的逆过程,在此我就不多说了,另外有关MIME的RFC还是有非常多的,假设须要具体情况请自行查找。)
    第一个字节,依据源字节的第一个字节处理。
    规则:源第一字节右移两位。去掉低2位,高2位补零。

    既:00 + 高6位
    第二个字节,依据源字节的第一个字节和第二个字节联合处理。
    规则例如以下,第一个字节高6位去掉然后左移四位。第二个字节右移四位
    即:源第一字节低2位 + 源第2字节高4位
    第三个字节。依据源字节的第二个字节和第三个字节联合处理,
    规则第二个字节去掉高4位并左移两位(得高6位),第三个字节右移6位并去掉高6位(得低2位),相加就可以
    第四个字节,规则,源第三字节去掉高2位就可以
    依据base64的编码规则,每76个字符须要一个换行
    //用更接近于编程的思维来说,编码的过程是这种:
    //第一个字符通过右移2位获得第一个目标字符的Base64表位置,依据这个数值取到表上对应的字符,就是第一//个目标字符。


    //然后将第一个字符与0xfc(11111100)进行与(&)操作并左移4位,接着第二个字符右移4位与前者相加,即获得第二个目标字符。
    //再将第二个字符与0x0f(00001111)进行与(&)操作并左移2位,接着第三个字符右移6位与前者相加,获得第三个目标字符。


    //最后取第三个字符的右6位即获得第四个目标字符。
    //在以上的每个步骤之后,再把结果与 0x3F 进行 AND 位操作,就能够得到编码后的字符了。
    但是等等……聪明的你可能会问到,原文的字节数量应该是3的倍数啊。假设这个条件不能满足的话,那该怎么办呢?
    我们的解决的方法是这种:原文剩余的字节依据编码规则继续单独转(1变2,2变3;不够的位数用0补全),再用=号补满4个字节。这就是为什么有些Base64编码会以一个或两个等号结束的原因,但等号最多仅仅有两个。由于:
    余数 = 原文字节数 MOD 3
    所以余数不论什么情况下都仅仅可能是0,1,2这三个数中的一个。

    假设余数是0的话。就表示原文字节数正好是3的倍数(最理想的情况啦)。假设是1的话。转成2个Base64编码字符,为了让Base64编码是4的倍数。就要补2个等号;同理,假设是2的话,就要补1个等号。




    在MIME格式的电子邮件中,base64能够用来将binary的字节序列数据编码成ASCII字符序列构成的文本。使用时,在传输编码方式中指定base64。使用的字符包含大写和小写字母各26个,加上10个数字,和加号“+”,斜杠“/”,一共64个字符。等号“=”用来作为后缀用途。


    完整的base64定义可见 RFC1421和 RFC2045。

    编码后的数据比原始数据略长。为原来的4/3。在电子邮件中。依据RFC822规定,每76个字符。还须要加上一个回车换行。

    能够估算编码后数据长度大约为原长的135.1%。
    转换的时候。将三个byte的数据,先后放入一个24bit的缓冲区中,先来的byte占高位。数据不足3byte的话,于缓冲区中剩下的Bit用0补足。然后,每次取出6个bit,依照其值选择ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/中的字符作为编码后的输出。不断进行,直到所有输入数据转换完毕。
    假设最后剩下两个输入数据,在编码结果后加1个“=”;假设最后剩下一个输入数据,编码结果后加2个“=”;假设没有剩下不论什么数据,就什么都不要加。这样才干够保证资料还原的正确性。
    举例来说。一段引用自Thomas Hobbes's Leviathan的文句:
    Man is distinguished, not only by his reason, but by this singular passion from other animals, which is a lust of the mind, that by a perseverance of delight in the continued and indefatigable generation of knowledge, exceeds the short vehemence of any carnal pleasure.
    经过base64编码之后变成:
    TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCBieSB0aGlz
    IHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYWxzLCB3aGljaCBpcyBhIGx1c3Qgb2Yg
    dGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJzZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGlu
    dWVkIGFuZCBpbmRlZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRo
    ZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=

  • 相关阅读:
    hdu6229 Wandering Robots 2017沈阳区域赛M题 思维加map
    hdu6223 Infinite Fraction Path 2017沈阳区域赛G题 bfs加剪枝(好题)
    hdu6438 Buy and Resell 买卖物品 ccpc网络赛 贪心
    hdu6441 Find Integer 求勾股数 费马大定理
    bzoj 1176 Mokia
    luogu 3415 祭坛
    bzoj 1010 玩具装箱
    bzoj 3312 No Change
    luogu 3383【模板】线性筛素数
    bzoj 1067 降雨量
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5167384.html
Copyright © 2011-2022 走看看