2017/02/07/base64/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>字符串 Base64 转码解码 | 羽痕爱编程</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="什么是 Base64 ?我不会说 “Base64是一种基于64个可打印字符来表示二进制数据的表示方法”，因为维基百科就摆在那里。 我想说，Base64 只是一种编码方式而已，和它并列的好基友有：hex、utf8、ascii、binary、ucs2，所以经过它编码后，仍然包含编码之前的全部信息。 就这么多。 为啥要用 Base64 ？Base64 的使用场景很多，例如 &lt;img&gt;、&amp;lt">
<meta property="og:type" content="article">
<meta property="og:title" content="字符串 Base64 转码解码">
<meta property="og:url" content="http://yuhenabc.com/2017/02/07/base64/index.html">
<meta property="og:site_name" content="羽痕爱编程">
<meta property="og:description" content="什么是 Base64 ?我不会说 “Base64是一种基于64个可打印字符来表示二进制数据的表示方法”，因为维基百科就摆在那里。 我想说，Base64 只是一种编码方式而已，和它并列的好基友有：hex、utf8、ascii、binary、ucs2，所以经过它编码后，仍然包含编码之前的全部信息。 就这么多。 为啥要用 Base64 ？Base64 的使用场景很多，例如 &lt;img&gt;、&amp;lt">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2017-02-07T16:00:00.000Z">
<meta property="article:modified_time" content="2024-11-26T01:36:31.306Z">
<meta property="article:author" content="yuhenabc">
<meta property="article:tag" content="javascript">
<meta name="twitter:card" content="summary">
  
  
<link rel="stylesheet" href="/css/style.css">

  
<!--    <link href='//fonts.useso.com/css?family=Titillium+Web:300,400,600' rel='stylesheet' type='text/css'>-->
<!--    <link href="//fonts.useso.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">-->
  
  
<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">

<meta name="generator" content="Hexo 6.3.0"></head>

<body>
  <div id="wrap">
    <header id="header">
  <div id="header-outer" class="outer">
    <div class="container">
      <div class="container-inner">
        <div id="header-title">
          <h1 class="logo-wrap">
            <a href="/" class="logo"></a>
          </h1>
          
        </div>
        <div id="header-inner" class="nav-container">
          <a id="main-nav-toggle" class="nav-icon fa fa-bars"></a>
          <div class="nav-container-inner">
            <ul id="main-nav">
              
            </ul>
            <nav id="sub-nav">
              <div id="search-form-wrap">
                
                  <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="搜索"><input type="hidden" name="sitesearch" value="http://yuhenabc.com"></form>
                
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
    <div class="container">
      <div class="main-body container-inner">
        <div class="main-body-inner">
          <section id="main">
            <div class="main-body-header">

              <h1 class="header"><a class="page-title-link" href="/categories/%E7%9F%A5%E8%AF%86%E5%A4%87%E5%BF%98/">知识备忘</a></h1>
            </div>
            <div class="main-body-content">
              
  <article id="post-base64" class="article article-single article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
      <!--  -->
      
        <header class="article-header">
          
  
    <h1 class="article-title" itemprop="name">
      字符串 Base64 转码解码
    </h1>
  

        </header>
      
      <p class="article-byline">
        <a href="/2017/02/07/base64/" class="article-date">
  <time datetime="2017-02-07T16:00:00.000Z" itemprop="datePublished">2017-02-08</time>
</a>
      </p>
      <div class="article-entry" itemprop="articleBody">
        <h2 id="什么是-Base64"><a href="#什么是-Base64" class="headerlink" title="什么是 Base64 ?"></a>什么是 Base64 ?</h2><p>我不会说 “Base64是一种基于64个可打印字符来表示二进制数据的表示方法”，因为维基百科就摆在那里。</p>
<p>我想说，Base64 只是一种编码方式而已，和它并列的好基友有：hex、utf8、ascii、binary、ucs2，所以经过它编码后，<strong>仍然包含编码之前的全部信息</strong>。</p>
<p>就这么多。</p>
<h2 id="为啥要用-Base64-？"><a href="#为啥要用-Base64-？" class="headerlink" title="为啥要用 Base64 ？"></a>为啥要用 Base64 ？</h2><p>Base64 的使用场景很多，例如 <code>&lt;img&gt;</code>、<code>&lt;canvas&gt;</code> 等 HTML 对象可以方便的转成 Base64 字符串，以便传输到服务器，但本文只研究字符串转字符串的情形。</p>
<p>像这句话：</p>
<figure class="highlight text"><table><tr><td class="code"><pre><span class="line">我很高兴学会用 Base64！</span><br></pre></td></tr></table></figure>
<p>转换成 Base64 字符串就是：</p>
<figure class="highlight text"><table><tr><td class="code"><pre><span class="line">5oiR5b6I6auY5YW05a2m5Lya55SoIEJhc2U2NO+8gQ==</span><br></pre></td></tr></table></figure>
<p>字符数明显多了不少，但有一个好处是消除了 Unicode 字符，那么你应该猜到，我们使用 Base64 的目的就是<strong>在读取或传输字符串前将中文字符导致乱码的可能性降低为零</strong>，典型案例：</p>
<ul>
<li>cookie 中保存中文信息</li>
<li>软件注册码包含授权用户信息</li>
</ul>
<p>注意，我们的仅仅用它来 “防乱码”，而加密的能力是木有的！</p>
<h2 id="如果我只想简单实现，怎么办？"><a href="#如果我只想简单实现，怎么办？" class="headerlink" title="如果我只想简单实现，怎么办？"></a>如果我只想简单实现，怎么办？</h2><p>如果是 Node.js 环境，好办，因为它有一个非常有爱的对象 —— Buffer，有了这个对象，啥都不叫事儿：</p>
<p>转码可以这样：</p>
<figure class="highlight reasonml"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="constructor">Buffer(<span class="params">str</span>)</span>.<span class="keyword">to</span><span class="constructor">String(&#x27;<span class="params">base64</span>&#x27;)</span>;</span><br></pre></td></tr></table></figure>
<p>解码可以这样：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Buffer</span>(str, <span class="string">&#x27;base64&#x27;</span>).<span class="title function_">toString</span>();</span><br></pre></td></tr></table></figure>
<p>node v5.10.0 以上 Buffer 还提供了 from 方法：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="title class_">Buffer</span>.<span class="title function_">from</span>(str, <span class="string">&#x27;base64&#x27;</span>).<span class="title function_">toString</span>();</span><br></pre></td></tr></table></figure>
<p>写成一个模块就是：</p>
<p><em>base64.js:</em></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="attr">encode</span>: <span class="keyword">function</span>(<span class="params">str</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Buffer</span>(str).<span class="title function_">toString</span>(<span class="string">&#x27;base64&#x27;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">decode</span>: <span class="keyword">function</span>(<span class="params">str</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="title class_">Buffer</span>.<span class="property">from</span> === <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="title class_">Buffer</span>.<span class="title function_">from</span>(str, <span class="string">&#x27;base64&#x27;</span>).<span class="title function_">toString</span>();</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Buffer</span>(str, <span class="string">&#x27;base64&#x27;</span>).<span class="title function_">toString</span>();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>测试一下：</p>
<p><em>test.js</em></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="title class_">Base64</span> = <span class="built_in">require</span>(<span class="string">&#x27;./base64.js&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Base64</span>.<span class="title function_">encode</span>(<span class="string">&#x27;dankogai&#x27;</span>));      <span class="comment">// ZGFua29nYWk=</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Base64</span>.<span class="title function_">encode</span>(<span class="string">&#x27;小飼弾&#x27;</span>));         <span class="comment">// 5bCP6aO85by+</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Base64</span>.<span class="title function_">decode</span>(<span class="string">&#x27;ZGFua29nYWk=&#x27;</span>));  <span class="comment">// dankogai</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Base64</span>.<span class="title function_">decode</span>(<span class="string">&#x27;5bCP6aO85by+&#x27;</span>));  <span class="comment">// 小飼弾</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>好，Node.js 环境的 Base64 转解码就完美解决了，下面请看浏览器环境下怎么搞？！</p>
<p>有人说 window 对象自带的方法 atob 和 btoa (a for ascii, b for base64) 不就可以吗？</p>
<p>但是，很遗憾该方法不能直接作用于 Unicode 字符串，请参看 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">这篇</a> 和 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/window.btoa#Unicode_Strings">这篇</a> 文章，所幸网友给出了折衷的办法，类比上边写成对象就是：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="title class_">Base64</span> = &#123;</span><br><span class="line">    <span class="attr">encode</span>: <span class="keyword">function</span>(<span class="params">str</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">window</span>.<span class="title function_">btoa</span>(<span class="built_in">unescape</span>(<span class="built_in">encodeURIComponent</span>(str)));</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">decode</span>: <span class="keyword">function</span>(<span class="params">str</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">decodeURIComponent</span>(<span class="built_in">escape</span>(<span class="variable language_">window</span>.<span class="title function_">atob</span>(str)));</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 直接测试 */</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Base64</span>.<span class="title function_">encode</span>(<span class="string">&#x27;dankogai&#x27;</span>));      <span class="comment">// ZGFua29nYWk=</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Base64</span>.<span class="title function_">encode</span>(<span class="string">&#x27;小飼弾&#x27;</span>));         <span class="comment">// 5bCP6aO85by+</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Base64</span>.<span class="title function_">decode</span>(<span class="string">&#x27;ZGFua29nYWk=&#x27;</span>));  <span class="comment">// dankogai</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Base64</span>.<span class="title function_">decode</span>(<span class="string">&#x27;5bCP6aO85by+&#x27;</span>));  <span class="comment">// 小飼弾</span></span><br></pre></td></tr></table></figure>
<p>完美？</p>
<h2 id="彩蛋"><a href="#彩蛋" class="headerlink" title="彩蛋"></a>彩蛋</h2><p>在线 Base64 转解码：</p>
<figure class="highlight text"><table><tr><td class="code"><pre><span class="line">转码：http://base64online.org/encode/</span><br><span class="line">解码：http://base64online.org/decode/</span><br></pre></td></tr></table></figure>
<p>Linux 命令行 Base64 转解码：</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;我很高兴学会用 Base64！&#x27;</span> | <span class="built_in">base64</span>     <span class="comment"># 转码</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;5oiR5b6I6auY5YW05a2m5Lya55SoIEJhc2U2NO+8gQo=&#x27;</span> | <span class="built_in">base64</span> --decode     <span class="comment"># 解码</span></span><br></pre></td></tr></table></figure>
<p>推荐的第三方 Base64 库：</p>
<figure class="highlight text"><table><tr><td class="code"><pre><span class="line">js-base64：https://www.npmjs.com/package/js-base64</span><br></pre></td></tr></table></figure>

      </div>
      <footer class="article-footer">
        <a data-url="http://yuhenabc.com/2017/02/07/base64/" data-id="cm3xsdest000yfcq64axjgb17" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
        
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/" rel="tag">javascript</a></li></ul>

      </footer>
    </div>
  </article>
  
  
            </div>
          </section>
          <aside id="sidebar">
  <a class="sidebar-toggle" title="Expand Sidebar"><i class="toggle icon"></i></a>
  <div class="sidebar-top">
    <p>关注我 :</p>
    <ul class="social-links">
      
    </ul>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2018/03/09/virtualenv/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">下一篇</strong>
      <p class="article-nav-title">
        
          使用 virtualenv 创建 python3 虚拟环境
        
      </p>
      <i class="icon fa fa-chevron-right" id="icon-chevron-right"></i>
    </a>
  
  
    <a href="/2016/07/31/date/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">上一篇</strong>
      <p class="article-nav-title">Date 对象使用总结</p>
      <i class="icon fa fa-chevron-left" id="icon-chevron-left"></i>
    </a>
  
</nav>

  
  <div class="widgets-container">
    
  </div>
</aside>
        </div>
      </div>
    </div>
    <footer id="footer">
  
  <div class="container">
    <div class="container-inner">
      <a id="back-to-top" href="javascript:;"><i class="icon fa fa-angle-up"></i></a>
      <div class="credit">
        <h1 class="logo-wrap">
          <a href="/" class="logo"></a>
        </h1>
        <p>&copy; 2024 yuhenabc</p>
        <p>Powered by <a href="//hexo.io/" target="_blank">Hexo</a>. Theme by <a href="//github.com/ppoffice" target="_blank">PPOffice</a></p>
      </div>
    </div>
  </div>
</footer>
    

<script src="/js/jquery.min.js"></script>


<script src="/js/html-patch.js"></script>


<script src="/js/script.js"></script>


  </div>
</body>
</html>