zoukankan      html  css  js  c++  java
  • Mime、base64编码

      

    第一部分

        在阮一峰老师的博客中,是这样介绍Mime的:

    MIME的全称是"Multipurpose Internet Mail Extensions",中译为"多用途互联网邮件扩展",指的是一系列的电子邮件技术规范,主要包括RFC 2045、RFC 2046、RFC 2047、RFC 4288、RFC 4289和RFC 2077。

    顾名思义,MIME是对传统电子邮件的一个扩展,现在已经成为电子邮件实际上的标准。

    传统的电子邮件是1982年定下技术规范的,文件是RFC 822。

    它的一个重要特点,就是规定电子邮件只能使用ASCII字符。这导致了三个结果:1)非英语字符都不能在电子邮件中使用;2)电子邮件中不能插入二进制文件(如图片);3)电子邮件不能有附件。

    这实际上无法接受的,因此到了1992年,工程师们决定扩展电子邮件的技术规范,提出一系列补充规范,这就是MIME的由来。

      Mime的扩展主要在于下面的语句。

      第一:

    MIME-Version: 1.0

      这条语句是必须的,而且1.0这个版本值是不变的,即使MIME本身已经升级了好几次。有了这条语句,收信端就知道这封信使用了MIME规范。

      第二:

    Content-Type: text/plain; charset="ISO-8859-1"

      这一行是极端重要的,它表明传递的信息类型和采用的编码。Content-Type表明信息类型,缺省值为" text/plain"。它包含了主要类型(primary type)和次要类型(subtype)两个部分,两者之间用"/"分割。主要类型有9种,分别是application、audio、example、image、message、model、multipart、text、video。

      

      第三:

    Content-transfer-encoding: base64

      这条语句指明了编码转换的方式。Content-transfer-encoding的值有5种----"7bit"、"8bit"、"binary"、"quoted-printable"和"base64"----其中"7bit"是缺省值,即不用转化的ASCII字符。真正常用是"quoted-printable"和"base64"两种,下面主要介绍base64。

      

    第二部分

      

      所谓Base64,就是说选出64个字符----小写字母a-z、大写字母A-Z、数字0-9、符号"+"、"/"(再加上作为垫字的"=",实际上是65个字符)----作为一个基本字符集。然后,其他所有符号都转换成这个字符集中的字符。

    具体来说,转换方式可以分为四步。

    第一步,将每三个字节作为一组,一共是24个二进制位。

    第二步,将这24个二进制位分为四组,每个组有6个二进制位。

    第三步,在每组前面加两个00,扩展成32个二进制位,即四个字节。

    第四步,根据下表,得到扩展后的每个字节的对应符号,这就是Base64的编码值。

      

      

      显然Base64将三个字节转化为了4个字节,所以Base64编码后的文本,会比原文本大出三分之一左右。

      

      

      

      

    第三部分

      我们知道在图片上性能优化的方法可能往往是使用雪碧图,还有一种方法就是使用base64编码的图片,这样就可以不用发送http请求了。 

      比如:谷歌搜索的语音图片就是这种形式:

          

      可以看到其中的data:image/png; base64 紧接着就是base64的编码。我们把这一段编码copy下来,自信实现如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>base</title>
    </head>
    <body>
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC" alt="">
    </body>
    </html>

      这样,我们就可以成功的显示出来了,并且不会发送http请求。

      但是base64图片的缺点在于其字符数很多,所以往往会严重影响css代码可读性。

      那么,是不是表示 base64 编码无用武之地呢?不然。当页面中的图片满足以下要求,base64 就能大显生手。

      如果图片足够小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且基本不会被更新

      

      下面介绍如何把一个图片转化为base64编码:

      方法一: http://www.pjhome.net/web/html5/encodeDataUrl.htm 这个在线网站可以让我们直接通过拖拽图片就得到base64编码的值。

      方法二: 打开chrome的空白页,然后拖入图片,打开开发者工具的source,就可以看到base64编码了,但是我们在引入的时候需要自行添加 data:image/png;base64

    结束

  • 相关阅读:
    2、Windows 系统下安装 IntelliJ IDEA
    1、IntelliJ IDEA 使用说明
    C# static的用法详解
    wpf 加载窗体界面时出现异常System.IO.FileNotFoundException
    ObservableCollection绑定到TextBox
    Lambda表达式(转载)
    C#中out和ref之间的区别 转载
    WPF序列化与反序列化
    软件版本号规范与命名原则 转载
    WPF DataGrid滚动条滑动的时候背景色错乱或显示不全
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6868458.html
Copyright © 2011-2022 走看看