python 字节转换到图像

图片字节串:

3.2. 注意

1. 因为更换后的各种字符的参天两位都以0,所以实际上有效位数是6个人,也正是二6=陆二十一个字符就可以覆盖全体的编码。

贰. 万壹剩下的字符不足一个字节,则用0填充,输出字符使用”=”,因而编码后输出的公文末尾恐怕会产出1或1个”=”。

3. 因为Base6四将二个字节转化成四个字节,由此Base6四编码后的文件,会比原版的书文件大出三分之一左右。

 

缺点:

  • 老东西(低版本)的IE浏览器不匹配。
  • 体量会比原来的图片大学一年级些。
  • css中过多使用base6四图片会使得css过大,不方便人民群众css的加载。

缺点:

  • 初期必要处理图片将小图合并,多稍微工程量。
  • 对此急需平时改变的图形维护起来麻烦。

②.字节转成图片:
base64.b64decode()

3.1. 具体来说,转换方式能够分为四步:

一. 将每三个字节分成1组,一共二五个二进制位:三*8=24

2. 将那二十五个二进制位分成四组,每组有两个二进制位:24/4=陆

3. 在每组前加两00,增添成三11个贰进制位,即多少个字节:4*(6+2)=32

4. 

根据下边包车型地铁编码表,获得扩张后各种字节的对应标记,就是Base6四的编码值

5. 

Value Encoding  Value Encoding  Value Encoding  Value Encoding

    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         (pad) =

   15 P            32 g            49 x

   16 Q            33 h            50 y

6. 

 

base64:

优点:

  • base6四的图样会趁着html可能css一起下载到浏览器,减少了请求.
  • 可制止跨域难点

python
字节转换到图像

1.1. 干什么要用自个儿的base6四编码方案

防止apache codec  jdk的jar冲突。

 

介绍:

Css
百事可乐s(Sprite图或cssSmart),是网页图片处理的一种方法,它同意你将3个页面涉及到的保有零星图片都含有到一张大图中去,那样壹来,当访问该页面时,载入的图纸就不会像在此之前那样1幅1幅地渐渐展现出来了。

生成base64编码:

图表生成base64能够用部分工具,如在线工具,但在品种中那样一个图片那样变化是挺麻烦。
尤其说下,webpack中的url-loader可以形成那么些工作,能够对限制大小的图纸展开base64的转移,万分便利。

 

1. Base64编码

Css Sprites:

动用例子:

  • 生成7-Up图:作者这里运用了网页Coca Cola图制作专家,当然还有为数不少别的的工具
  • 合成的图样如图所示:
    图片 1

html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css Sprites</title>
</head>

<body>
    <ul class="container">
        <li class="icon icon-issue"></li>
        <li class="icon icon-upload"></li>
        <li class="icon icon-passage"></li>
    </ul>
</body>

</html>

css代码:

.container {
    overflow: hidden;
    width: 50px;
    height: 200px;
    background-color: #faa755;
}

.icon {
    margin: 0 auto;
    margin-top: 20px;
    width: 40px;
    height: 30px;
    background-image: url(icon.png);
    list-style-type: none;
}

.icon-issue {
    background-position: 0 0;
}

.icon-upload {
    background-position: 0 -50px;
}

.icon-passage {
    background-position: 0 -100px;
}
  • 效果图:
    图片 2

发表评论

电子邮件地址不会被公开。 必填项已用*标注