https://mirreal.github.io/_next/static/chunks/pages/posts/base64-note-5c862888f7c6a4df.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4438],{3752:function(s,e,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/posts/base64-note",function(){return r(5427)}])},5427:function(s,e,r){"use strict";r.r(e),r.d(e,{__toc:function(){return c}});var l=r(5893),n=r(2673),o=r(8473),i=r(797);r(3450),r(6067);var t=r(2643);let c=[{depth:3,value:"Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。",id:"base64-是一种基于-64-个可打印字符来表示二进制数据的表示方法"},{depth:4,value:"1.base64 算法的由来",id:"1base64-算法的由来"},{depth:4,value:"2.base64 不是加密算法",id:"2base64-不是加密算法"},{depth:4,value:"3.Base 编码方法",id:"3base-编码方法"},{depth:4,value:"4.base64 索引表如下",id:"4base64-索引表如下"},{depth:4,value:"5.一个简单的编码方法和译码方法实现：",id:"5一个简单的编码方法和译码方法实现"},{depth:3,value:"HTML5 提供的通用 Base64 方法 API",id:"html5-提供的通用-base64-方法-api"},{depth:4,value:"1.编码： window.btoa(stringToEncode)",id:"1编码-windowbtoastringtoencode"},{depth:4,value:"2.解码： window.atob(encodedData)",id:"2解码-windowatobencodeddata"},{depth:4,value:"3.作用于 UTF-8 编码的文字",id:"3作用于-utf-8-编码的文字"},{depth:3,value:"Data URL与Base64",id:"data-url与base64"},{depth:5,value:"参考资料：",id:"参考资料"}];function a(s){let e=Object.assign({h1:"h1",h3:"h3",h4:"h4",p:"p",table:"table",tbody:"tbody",tr:"tr",th:"th",td:"td",pre:"pre",code:"code",span:"span",h5:"h5",ol:"ol",li:"li",a:"a"},(0,t.a)(),s.components);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.h1,{children:"Base64 简要笔记及其他"}),"\n",(0,l.jsx)(e.h3,{id:"base64-是一种基于-64-个可打印字符来表示二进制数据的表示方法",children:"Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。"}),"\n",(0,l.jsx)(e.h4,{id:"1base64-算法的由来",children:"1.base64 算法的由来"}),"\n",(0,l.jsx)(e.p,{children:"base64 最早是用作解决电子邮件的传输问题，由于历史原因，早期电子邮件只允许传输 ASCII 码字符，如果想传输一封带有非 ASCII 字符的邮件，在遇到一些老旧的网关就可能会对字符最高位进行调整，导致收到的邮件出现乱码。"}),"\n",(0,l.jsx)(e.h4,{id:"2base64-不是加密算法",children:"2.base64 不是加密算法"}),"\n",(0,l.jsx)(e.p,{children:"base64 算法的编码和解码方法可以作为加密和解密操作，但是不能叫做加密算法，因为其算法和充当密钥的索引表都是公开的。最多是让在你身后的人一时看不懂，所谓防君子不防小人。"}),"\n",(0,l.jsx)(e.h4,{id:"3base-编码方法",children:"3.Base 编码方法"}),"\n",(0,l.jsx)(e.p,{children:"转换的时候，将三个 byte 的数据，先后放入一个 24bit 的缓冲区中，先来的 byte 占高位。数据不足 3byte 的话，剩下的 bit 用 0 补足。然后，每次取出 6 个 bit，按照其值选择索引表的字符作为编码后的输出。不断进行，直到全部输入数据转换完成。"}),"\n",(0,l.jsx)(e.p,{children:"这里就不举例说明，具体可以参考维基百科。"}),"\n",(0,l.jsx)(e.h4,{id:"4base64-索引表如下",children:"4.base64 索引表如下"}),"\n",(0,l.jsx)(e.table,{children:(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.th,{scope:"col",children:"数值"}),(0,l.jsx)(e.th,{scope:"col",children:"字符"}),(0,l.jsx)(e.th,{scope:"col",children:"数值"}),(0,l.jsx)(e.th,{scope:"col",children:"字符"}),(0,l.jsx)(e.th,{scope:"col",children:"数值"}),(0,l.jsx)(e.th,{scope:"col",children:"字符"}),(0,l.jsx)(e.th,{scope:"col",children:"数值"}),(0,l.jsx)(e.th,{scope:"col",children:"字符"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"0"}),(0,l.jsx)(e.td,{children:"A"}),(0,l.jsx)(e.td,{children:"16"}),(0,l.jsx)(e.td,{children:"Q"}),(0,l.jsx)(e.td,{children:"32"}),(0,l.jsx)(e.td,{children:"g"}),(0,l.jsx)(e.td,{children:"48"}),(0,l.jsx)(e.td,{children:"w"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"1"}),(0,l.jsx)(e.td,{children:"B"}),(0,l.jsx)(e.td,{children:"17"}),(0,l.jsx)(e.td,{children:"R"}),(0,l.jsx)(e.td,{children:"33"}),(0,l.jsx)(e.td,{children:"h"}),(0,l.jsx)(e.td,{children:"49"}),(0,l.jsx)(e.td,{children:"x"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"2"}),(0,l.jsx)(e.td,{children:"C"}),(0,l.jsx)(e.td,{children:"18"}),(0,l.jsx)(e.td,{children:"S"}),(0,l.jsx)(e.td,{children:"34"}),(0,l.jsx)(e.td,{children:"i"}),(0,l.jsx)(e.td,{children:"50"}),(0,l.jsx)(e.td,{children:"y"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"3"}),(0,l.jsx)(e.td,{children:"D"}),(0,l.jsx)(e.td,{children:"19"}),(0,l.jsx)(e.td,{children:"T"}),(0,l.jsx)(e.td,{children:"35"}),(0,l.jsx)(e.td,{children:"j"}),(0,l.jsx)(e.td,{children:"51"}),(0,l.jsx)(e.td,{children:"z"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"4"}),(0,l.jsx)(e.td,{children:"E"}),(0,l.jsx)(e.td,{children:"20"}),(0,l.jsx)(e.td,{children:"U"}),(0,l.jsx)(e.td,{children:"36"}),(0,l.jsx)(e.td,{children:"k"}),(0,l.jsx)(e.td,{children:"52"}),(0,l.jsx)(e.td,{children:"0"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"5"}),(0,l.jsx)(e.td,{children:"F"}),(0,l.jsx)(e.td,{children:"21"}),(0,l.jsx)(e.td,{children:"V"}),(0,l.jsx)(e.td,{children:"37"}),(0,l.jsx)(e.td,{children:"l"}),(0,l.jsx)(e.td,{children:"53"}),(0,l.jsx)(e.td,{children:"1"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"6"}),(0,l.jsx)(e.td,{children:"G"}),(0,l.jsx)(e.td,{children:"22"}),(0,l.jsx)(e.td,{children:"W"}),(0,l.jsx)(e.td,{children:"38"}),(0,l.jsx)(e.td,{children:"m"}),(0,l.jsx)(e.td,{children:"54"}),(0,l.jsx)(e.td,{children:"2"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"7"}),(0,l.jsx)(e.td,{children:"H"}),(0,l.jsx)(e.td,{children:"23"}),(0,l.jsx)(e.td,{children:"X"}),(0,l.jsx)(e.td,{children:"39"}),(0,l.jsx)(e.td,{children:"n"}),(0,l.jsx)(e.td,{children:"55"}),(0,l.jsx)(e.td,{children:"3"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"8"}),(0,l.jsx)(e.td,{children:"I"}),(0,l.jsx)(e.td,{children:"24"}),(0,l.jsx)(e.td,{children:"Y"}),(0,l.jsx)(e.td,{children:"40"}),(0,l.jsx)(e.td,{children:"o"}),(0,l.jsx)(e.td,{children:"56"}),(0,l.jsx)(e.td,{children:"4"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"9"}),(0,l.jsx)(e.td,{children:"J"}),(0,l.jsx)(e.td,{children:"25"}),(0,l.jsx)(e.td,{children:"Z"}),(0,l.jsx)(e.td,{children:"41"}),(0,l.jsx)(e.td,{children:"p"}),(0,l.jsx)(e.td,{children:"57"}),(0,l.jsx)(e.td,{children:"5"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"10"}),(0,l.jsx)(e.td,{children:"K"}),(0,l.jsx)(e.td,{children:"26"}),(0,l.jsx)(e.td,{children:"a"}),(0,l.jsx)(e.td,{children:"42"}),(0,l.jsx)(e.td,{children:"q"}),(0,l.jsx)(e.td,{children:"58"}),(0,l.jsx)(e.td,{children:"6"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"11"}),(0,l.jsx)(e.td,{children:"L"}),(0,l.jsx)(e.td,{children:"27"}),(0,l.jsx)(e.td,{children:"b"}),(0,l.jsx)(e.td,{children:"43"}),(0,l.jsx)(e.td,{children:"r"}),(0,l.jsx)(e.td,{children:"59"}),(0,l.jsx)(e.td,{children:"7"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"12"}),(0,l.jsx)(e.td,{children:"M"}),(0,l.jsx)(e.td,{children:"28"}),(0,l.jsx)(e.td,{children:"c"}),(0,l.jsx)(e.td,{children:"44"}),(0,l.jsx)(e.td,{children:"s"}),(0,l.jsx)(e.td,{children:"60"}),(0,l.jsx)(e.td,{children:"8"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"13"}),(0,l.jsx)(e.td,{children:"N"}),(0,l.jsx)(e.td,{children:"29"}),(0,l.jsx)(e.td,{children:"d"}),(0,l.jsx)(e.td,{children:"45"}),(0,l.jsx)(e.td,{children:"t"}),(0,l.jsx)(e.td,{children:"61"}),(0,l.jsx)(e.td,{children:"9"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"14"}),(0,l.jsx)(e.td,{children:"O"}),(0,l.jsx)(e.td,{children:"30"}),(0,l.jsx)(e.td,{children:"e"}),(0,l.jsx)(e.td,{children:"46"}),(0,l.jsx)(e.td,{children:"u"}),(0,l.jsx)(e.td,{children:"62"}),(0,l.jsx)(e.td,{children:"+"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"15"}),(0,l.jsx)(e.td,{children:"P"}),(0,l.jsx)(e.td,{children:"31"}),(0,l.jsx)(e.td,{children:"f"}),(0,l.jsx)(e.td,{children:"47"}),(0,l.jsx)(e.td,{children:"v"}),(0,l.jsx)(e.td,{children:"63"}),(0,l.jsx)(e.td,{children:"/"})]})]})}),"\n","\n",(0,l.jsx)(e.h4,{id:"5一个简单的编码方法和译码方法实现",children:"5.一个简单的编码方法和译码方法实现："}),"\n",(0,l.jsx)(e.pre,{"data-language":"javascript","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"javascript","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"base64Encode"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(data) {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" map "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

1+/'"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" out "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:" "}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"for"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" i "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" len "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; i "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" len; i "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"3"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" binStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"        newStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"        threeChar "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".slice"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(i"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" i"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"3"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:" "}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"for"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" j "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; j "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"3"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; j"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"++"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" t "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"threeChar"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".charCodeAt"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(j)"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toString"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"while"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"t"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"8"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") t "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'0'"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" t;"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"      binStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" t;"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,l.jsx)(e.span,{className:"line",children:" "}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"for"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" k "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; k "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"24"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; k "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"6"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"      newStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" map["}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"parseInt"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"binStr"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".slice"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(k"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" k"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"6"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")];"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" (i"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"3"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"len "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") newStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"newStr"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".slice"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"3"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'='"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" (i"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"3"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"len "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") newStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"newStr"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".slice"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'=='"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    out "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" newStr;"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" out;"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"};"})}),"\n",(0,l.jsx)(e.span,{className:"line",children:" "}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.s

1pan,{style:{color:"var(--shiki-token-function)"},children:"base64Decode"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(code) {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" map "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ascii "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"' !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ'"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"          "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'[\\\\]^_`abcdefghijklmnopqrstuvwxyz{|}~'"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" out "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:" "}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"for"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" i "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" len "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"code"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; i "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" len; i "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" fourChar "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"code"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".slice"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(i"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" i"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"        binStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"        newStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:" "}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"for"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" j "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; j "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; j"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"++"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" t "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"map"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".indexOf"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fourChar"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".charAt"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(j))"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toString"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"while"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"t"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"6"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") t "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'0'"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" t;"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"      binStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" t;"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,l.jsx)(e.span,{className:"line",children:" "}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"for"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" k "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; k "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"24"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"; k "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"8"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" char "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ascii["}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"parseInt"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"binStr"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".slice"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(k"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" k"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"8"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"32"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"];"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}

1,children:" (char "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"!=="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"undefined"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:") newStr "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" char;"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    out "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" newStr;"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" out;"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})}),"\n",(0,l.jsx)(e.h3,{id:"html5-提供的通用-base64-方法-api",children:"HTML5 提供的通用 Base64 方法 API"}),"\n",(0,l.jsxs)(e.h4,{id:"1编码-windowbtoastringtoencode",children:["1.编码： ",(0,l.jsx)(e.code,{children:"window.btoa(stringToEncode)"})]}),"\n",(0,l.jsx)(e.p,{children:"只能将 ASCII 字符串或二进制数据转换成一个 base64 编码过的字符串,该方法不能直接作用于 Unicode 字符串。"}),"\n",(0,l.jsxs)(e.h4,{id:"2解码-windowatobencodeddata",children:["2.解码： ",(0,l.jsx)(e.code,{children:"window.atob(encodedData)"})]}),"\n",(0,l.jsx)(e.p,{children:"将已经被 base64 编码过的数据进行解码。"}),"\n",(0,l.jsx)(e.h4,{id:"3作用于-utf-8-编码的文字",children:"3.作用于 UTF-8 编码的文字"}),"\n",(0,l.jsxs)(e.p,{children:["但是这两个 Web API 功能很简单，并不能直接作用于 Unicode 字符串，所以当调用 ",(0,l.jsx)(e.code,{children:"btoa()"})," 时若传入的不是 ASCII 或二进制字符串，比如汉字就会出错。"]}),"\n",(0,l.jsx)(e.p,{children:"下面是别人提供的简单解决方法："}),"\n",(0,l.jsx)(e.pre,{"data-language":"javascript","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"javascript","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"utf8_to_b64"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"( str ) {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"window"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".btoa"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"unescape"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"encodeURIComponent"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(str)));"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,l.jsx)(e.span,{className:"line",children:" "}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"b64_to_utf8"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"( str ) {"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"decodeURIComponent"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"escape"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"window"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".atob"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(str)));"})]}),"\n",(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,l.jsxs)(e.p,{children:["作者在这里使用了一个小小的Hack技巧。",(0,l.jsx)(e.code,{children:"encodeURIComponent()"})," 是ECMAscript中Global对象的URI方法，对URI进行编码，可以作用于所有Unicode字符。而 ",(0,l.jsx)(e.code,{children:"escape()"})," 是已废弃的URI编码方法，功能和 ",(0,l.jsx)(e.code,{children:"encodeURIComponent()"})," 相同，但是只能编码ASCII字符。"]}),"\n",(0,l.jsxs)(e.p,{children:["即 ",(0,l.jsx)(e.code,{children:"encodeURIComponent(str)"})," 相当于 ",(0,l.jsx)(e.code,{children:"escape(unicodeToASCII(str))"})," ，则 ",(0,l.jsx)(e.code,{children:"unescape(encodeURIComponent(str))"})," 等同于 ",(0,l.jsx)(e.code,{children:"unicodeToASCII(str)"})," ,所以就将 Unicode 字符转换成了 ASCII 字符。( ",(0,l.jsx)(e.code,{children:"unescape()"})," 是和 ",(0,l.jsx)(e.code,{children:"escape()"})," 对应的解码方法）"]}),"\n",(0,l.jsx)(e.p,{children:"关于文字集和文字编码方面的知识，比如 UTF-8 是基于 Unicode 文字集的一种广泛使用的编码方式，具体此处不再赘述。"}),"\n",(0,l.jsx)(e.h3,{id:"data-url与base64",children:"Data URL与Base64"}),"\n",(0,l.jsx)(e.p,{children:"这里主要说说 Data URL 模式和 Base64 ，比如下面这段代码："}),"\n",(0,l.jsx)(e.pre,{"data-language":"javascript","data-theme":"default",children:(0,l.jsx)(e.code,{"data-language":"javascript","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"}

1,children:'"\\n\\n\\n%c"'}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'font-size:0;margin-top:20px;line-height:36px;padding-top:50px;padding-left:158px;background:url(\"data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAyAJ4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3+iiigCtfX9vp1sZ7hwqjoO5PoK5afxu/mH7ParszwXPNc94y1sz6/Nbb/wB1a/IF/wBrqTXR+HvCls+nxXWoqZZZlDiPJAQHp+NerDD0aFFVK2rZ5U69avVdOi7JBa+NgXAurXap/ijOcV1Vtcw3kCzwOHjYcEVxnijwzBZae9/YBkEXMkecjHqM+lUvAest/ar6ezZjmQso9GH/ANalVw1KrRdahpbdDpV61KsqVbW56NRRRXlnqBRRVOTVtOhlaKW/tkkU4ZWlUEH6ZoAuUVQ/tvSv+glaf9/l/wAaP7b0r/oJWn/f5f8AGgC/RUMF1b3MXmwTxyxg43owI/On+dF/z1T/AL6FAD6Ko2utaXfSyRWmo2s8kX31jlVivbnBq2JYycCRCT2DUAPopjTRKcNIgI7FhSefD/z1j/76FAElFR+fD/z1j/76FPVlYZVgR6g0AMmmjgiaWVgqKMkmuO1fxrIkEj6YqkoM/vE+8O+DmqfxF1loJrXTVbarKZXHrzgf1qPwh4ei1iye8vdzW7MUSMHG7HXJ9K9COEgsM61XrscDxlT61GlSSdt76+p59qN1/al5LeyuUmmYu5XkE/SvY/CPiG01bRrePz4xdwxqksecHIGMgehrP174f6XdafIdMgFrdopMe1jtYjsQf5145E00krBJHh8s/PIpIK89OO5rzqVXE1akKFR8yb062PqcRh8sqYWri8PHklFXfS/6a7K3U9u8Zarbpo9xp6XCC4uF2HHOxT1OPXHQVwWivaaHex3lusktwgIDSvxzweBWVpkV1q1/DZWiPJK/djnA7lj/AFr1aw8FaTa2qx3EP2mbHzyOSMn2APFfQS9jgqfspNu58NH22Nqe0jpbb+u5X03xzaXEqxXqfZ2bgODlfx9K6tWDKGUgg8gjvXlPjbw+mgPDdWhY2kzFdpOSjdcZ9MfyrovhzrL6hpc9pKxZrVwFJ67T0rjxOFpuj9Yo7HZhsTUVb2Fbc7WvIfGeneCrHxNctq39q/bLj9+/kBSnPp+VevV4x8Q7yPT/AIlWN7NEZY4FikeMYywDZI5rzD0zjteHh3fCNAW82YPmm7xnPbGPxrVtE8AfY4RdnWWudg80xqu0t3xz0rr/APha+g/9C7P/AN8x1heLfHel+IdDaws9HktZTIr+YyoAAO3HNAHaWdlpln8Kb59HNx9juLeWZPPPzgng5x9K8tMOm2ehaddXEN9PcXRcsVm2oqq2MD3r1DS/+SKD/sHyfzauDll05vAWhWd9eS2rmea4jZITICAdv55NAEKweGAMjSPEYJ9HH/xNXvCUmjnxzYRQWGpxssuYzLPkqdp++uOn/wBaro8a6hHEMeJbsIqjBOkDGPrip/BmqaXL47+2y6pdX2pXymMAWnlr0HJ/BewoA6jXfhpYa9rNxqU2oXcckxGUTGBgAentWd/wp3S/+gpff+O/4

1Vk/FLRo9PuG1ganP9ovZQkdoowMBQCc59h27irWn/Cqa5063nudduoZ5I1d4wmdhIzjrQBc/wCFO6X/ANBS+/8AHf8ACuz8O6FD4c0aLTIJpJo42Zg8mMncSf61xDfCVI1LN4kulUdSY8Af+PV2nhjR00LQobCO8a8VGZhM3U5Yn1PTOKAPPvi1aSw6lYagobyniMRI6Bgcj8wT+VXPhv4stI9OOk3kgieNy0bN0IPJ/XNd9rGkWmuaZLY3ibo3HBHVT2I968h1T4c6zps5MEbXUIOUlhOG/EdQa9vD1KOJwyw9R2a2PHrwq4bEPEU48ye56jrPifT9M02a4FzG7Kp2lTkA9s/4d68HjE+pX0dpYwu7SSHy4x1Zj1J9z+lbsXg7xFqUqxta3bY6G4YhV9/mr0vwf4Kt/DUZuJmWfUJBhpMcIPRf8aqCw+Ai535p9CZzr49qmk4w3f8AWl/Is+EPCsPhrTsNiS+mAM8v/so9hXR0UV4tSpKpNzm9WevTpxpxUIrRGJ4p8Px+JNHNm85gdXEkcgGQGAI5HcYJqn4O8Jx+GLacm6+0zzkFnC4UAdABU3jKPVJNDzpUZmkSQNJEpwXTByB+ODj2rO8AW2tRWt3LqkUlvFI4MMEh5HqfbNdkef6o/f0vsccuT62vc1tudlXjnxAmay+JFjfG1knjt1ikZFX7wDZI6V7HRXAd55h/ws+w/wChXn/Jf/iawvFnjKDxFoh0+20Ga2kMiv5m0Hp24Fe2UUAcPZWlxb/B77NNDIk4sHBjK/Nzkjj8a4Sy1Oxi8H2+i6r4cvLtgXkSZPkaMlj904yOle50UAfPsmn+M5PDoR7fUjpAbiIjkL2+Xrj3xiuv8D6rpen6ha6dZeGb2Ga4bZJez/M3TOSccDjoMda9TooA8a8fX00/j+3M+n3FzY6dsxGgIEnRjzjvwPwrc/4WvL/0LN5/38/+xr0migDyPxF8QZ9c0C801fD95C1wm0SFydvPXG2ux+HFtcWngixjuYXikJdtrgg4LEg8+orq6KACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//Z\");background-repeat:no-repeat;'"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"})]})})}),"\n",(0,l.jsxs)(e.p,{children:["这是一个真实的小例子，可以在百度网盘看到，会在控制台打印出百度云logo。这里用到了 ",(0,l.jsx)(e.code,{children:"console.log()"})," 的一些稍微高级一点的用法，支持类似C语言 ",(0,l.jsx)(e.code,{children:"printf()"})," 风格的打印方式，占位符 ",(0,l.jsx)(e.code,{children:"%c"})," 可以使用一些CSS样式语句。比如这里使用的："]}),"\n",(0,l.jsx)(e.pre,{"data-language":"css","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"css","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-size"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:": 0;"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"margin-top"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:": 20px;"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"line-height"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:": 36px;"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"padding-top"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:": 50px;"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"padding-left"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:": 158px;"})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'background: url("'}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:':image/png;base64...");'})]}),"\n",(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"background-repeat"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"no-repeat"}),(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})]})}),"\n",(0,l.jsxs)(e.p,{children:["关于 ",(0,l.jsx)(e.code,{children:"console.log()"})," 的用法以及 ",(0,l.jsx)(e.code,{children:"console"})," 对象的其他方法、属性，具体此处不再赘述。"]}),"\n",(0,l.jsx)(e.p,{children:"回到 url，可以看到一长串数据，在开头是这样的："}),"\n",(0,l.jsx)(e.pre,{"data-language":"text","data-theme":"default",children:(0,l.jsx)(e.code,{"data-language":"text","data-theme":"default",children:(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    data:image/png;base64..."})})})}),"\n",(0,l.jsx)(e.p,{children:"这就是 Data URL Scheme 的语法格式，后面是用 Base64 编码的图片数据。"}),"\n",(0,l.jsx)(e.p,{children:"完整的图片就像下面这样，可以直接复制到地址栏查看："}),"\n",(0,l.jsx)(e.pre,{"data-language":"text","data-theme":"default",children:(0,l.jsx)(e.code,{"data-language":"text","data-theme":"default",children:(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    data:image/png;base64,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"})})})}),"\n",(0,l.jsx)(e.p,{children:"不过，Firefox 似乎不支持在控制台使用 Data URL，大概是由于这个原因，有时候可以降级在控制台直接使用一张图片。"}),"\n",(0,l.jsx)(e.h5,{id:"参考资料",children:"参考资料："}),"\n",(0,l.jsxs)(e.ol,{children:["\n",(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:"https://developer.mozilla.org/zh-CN/docs/Web/API/Window.btoa",children:"https://developer.mozilla.org/zh-CN/docs/Web/API/Window.btoa"})}),"\n",(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:"https://developer.mozilla.org/zh-CN/docs/Web/API/Window.atob",children:"https://developer.mozilla.org/zh-CN/docs/Web/API/Window.atob"})}),"\n",(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:"http://tools.ietf.org/html/rfc2397",title:"RFC 2397 of the Internet Engineering Task Force (IETF)",children:"RFC 2397 of the Internet Engineering Task Force (IETF)"})}),"\n",(0,l.jsx)(e.li,{children:"Javascript高级程序设计（第3版）[人民邮电出版社]"}),"\n",(0,l.jsx)(e.li,{children:"Java加密与解密的艺术[机械工业出版社]"}),"\n"]})]})}let h={MDXContent:function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,t.a)(),s.components);return e?(0,l.jsx)(e,{...s,children:(0,l.jsx)(a,{...s})}):a(s)},pageOpts:{filePath:"pages/posts/base64-note.md",route:"/posts/base64-note",frontMatter:{title:"Base64 简要笔记及其他",date:"2014-11-06T00:00:00.000Z",tag:"JavaScript"},timestamp:1770794683e3,pageMap:[{kind:"MdxPage",name:"about",route:"/about",frontMatter:{type:"page",title:"About",date:"2024-04-01T00:00:00.000Z"}},{kind:"MdxPage",name:"if",route:"/if",frontMatter:{type:"page",title:"If",date:"2024-04-01T00:00:00.000Z"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{type:"page",title:"Home",date:"2024-04-01T00:00:00.000Z"}},{kind:"Folder",name:"posts",route:"/posts",children:[{kind:"MdxPage",name:"base64-note",route:"/posts/base64-note",frontMatter:{title:"Base64 简要笔记及其他",date:"2014-11-06T00:00:00.000Z",tag:"JavaScript"}},{kind:"MdxPage",name:"call-apply-and-context-in-javascript",route:"/posts/call-apply-and-context-in-javascript",frontMatter:{title:"魔幻语言 JavaScript 系列之 call、bind 以及上下文",date:"2017-11-09T00:00:00.000Z",categories:"translator",tag:"ECMAScript, JavaScript"}},{kind:"MdxPage",name:"game-of-life",route:"/posts/game-of-life",frontMatter:{title:"康威生命游戏的简单实现",date:"2014-08-21T10:00:00.000Z",tag:"JavaScript"}},{kind:"MdxPage",name:"index",route:"/posts",frontMatter:{type:"posts",title:"Posts",date:"2024-04-01T00:00:00.000Z"}},{kind:"MdxPage",name:"learning-at-work",route:"/posts/learning-at-work",frontMatter:{title:"在工作中学习",date:"2017-09-02T00:00:00.000Z",categories:"translator",tag:"career"}},{kind:"MdxPage",name:"looking-into-assembly-code-of-coercion",route:"/posts/looking-into-assembly-code-of-coercion",frontMatter:{title:"魔幻语言 JavaScript 系列之类型转换、宽松相等以及原始值",date:"2018-04-12T00:00:00.000Z",categories:"translator",tag:"ECMAScript, JavaScript"}},{kind:"MdxPage",name:"my-atom-editor-setup-for-js-react",route:"/posts/my-atom-editor-setup-for-js-react",frontMatter:{title:"JS/React 开发者的 Atom 终极配置",date:"2017-05-28T00:00:00.000Z",categories:"translator",tag:"editor, JavaScript"}},{kind:"MdxPage",name:"riding-on-318",route:"/posts/riding-on-318",frontMatter:{title:"318：无关朝圣，无关梦想，只是骑行而已",date:"2017-09-19T00:00:00.000Z",tag:"riding"}},{kind:"Meta",data:{index:"Posts","looking-into-assembly-code-of-coercion":"魔幻语言 JavaScript 系列之类型转换、宽松相等以及原始值","call-apply-and-context-in-javascript":"魔幻语言 JavaScript 系列之 call、bind 以及上下文","riding-on-318":"318：无关朝圣，无关梦想，只是骑行而已","learning-at-work":"在工作中学习","my-atom-editor-setup-for-js-react":"JS/React 开发者的 Atom 终极配置","base64-note":"Base64 简要笔记及其他","game-of-life":"康威生命游戏的简单实现"}}]},{kind:"Meta",data:{about:"About",if:"If",index:"Home"}}],flexsearch:{codeblocks:!0},title:"Base64 简要笔记及其他",headings:c},pageNextRoute:"/posts/base64-note",nextraLayout:o.ZP,themeConfig:i.Z};e.default=(0,n.j)(h)},797:function(s,e,r){"use strict";var l=r(5893),n=r(9554),o=r.n(n);let i=new Date().getFullYear();e.Z={footer:(0,l.jsxs)("footer",{className:"jsx-2447ca1c11803f07",children:[(0,l.jsxs)("small",{className:"jsx-2447ca1c11803f07",children:[(0,l.jsx)("time",{className:"jsx-2447ca1c11803f07",children:i})," \xa9 Patrick Ran",(0,l.jsx)("a",{href:"/feed.xml",className:"jsx-2447ca1c11803f07",children:"RSS"})]}),(0,l.jsx)(o(),{id:"2447ca1c11803f07",children:"footer.jsx-2447ca1c11803f07{margin-top:8rem}a.jsx-2447ca1c11803f07{float:right}"})]})}}},function(s){s.O(0,[5936,2888,9774,179],function(){return s(s.s=3752)}),_N_E=s.O()}]);