JavaScript BASE64的编码

关于BASE64，我在之前的文章“ BASE64和CSS中使用BASE64图片 ”中有介绍过原理，我们今天来用代码实现。
　　首先是传统的方法，遍历 手动移位。下面是传统方式的实现，注释很详细了，我就不另外解释了。如果有什么问题可以更帖提出。

var e="我主页：www.wozhuye.com";
 
 //定义循环变量、输出数组、临时数组
 var i=0,o=[],t=[],
 //定义BASE64位字符
 s=("ABCDEFGHIJKLMNOPQRSTUVWXYZ" 
   "abcdefghijklmnopqrstuvwxyz" 
   "0123456789 /").split("");
 //转换成数组
 encodeURIComponent(e).replace(/%..|./g,function(e){
   var c=e.charCodeAt(0);
   t.push(c==37?("0x" e.slice(-2))*1:c);
 });
 console.log(t);
 //分解并编码
 while(t.length>=3)o.push(
     //临时数组的前3个字节转换成4个6位的数字
     //并从前面定义的BASE64位字符中取出相应的字符
     s[t[0]>>2],s[(t[0]&3)<<4|t[1]>>4],
     s[(t[1]&15)<<2|t[2]>>6],s[t[2]&63]
   ),t.splice(0,3);//执行完后删除用过的数组项
 //遍历完后判断是否有余下不足三字节的字符
 if(t.length)o.push(
   //前两个六位照常计算
   s[t[0]>>2],s[(t[0]&3)<<4|t[1]>>4],
   //如果剩余的部分只有1字节，则第3个6位设置成等号
   //否则正常计算；最后一个六位始终为等号
   t.length==1?"=":s[(t[1]&15)<<2|t[2]>>6],"="
 );
 
 alert(o.join(""));

　　这个代码随手写的，也许在很多地方还可以优化，不过大概思路就是这样吧。下面来看看调用的方法，虽然效率未必会比传统的方法高，但是它还是很有发展空间的。

var r=base64("我主页：www.wozhuye.com");
 console.log(r);
 
 function base64(e){
   var i=0,o,c;
   //支持btoa的浏览器用btoa
   if(window.btoa)o=btoa(unescape(encodeURIComponent(e)));
   else {
     //创建XMLDOM对象
     xml=new ActiveXObject("Microsoft.XMLDOM");
     //创建节点
     x=xml.createElement("x");
     //放入16进制数据
     x.text=encodeURIComponent(e).replace(/%..|./g,function(e){
       var c=e.charCodeAt(0);
       if(c!=37)e="0" c.toString(16);
       return e.slice(-2);
     });
     //输出字节流对象
     x.dataType="bin.hex";
     e=x.nodeTypedValue;
     //清空数据
     x.text="";
     //设置数据类型
     x.dataType="bin.base64";
     //写入数据流对象
     x.nodeTypedValue=e;
     //输出字符串
     o=x.text;
   };
   return o;
 };

　　IE上可以使用XMLDOM对象的节点数据类型功能来做BASE64转换，但是它需要接受一个字节数组类型的参数。JavaScript本身不具备这个类型，所以需要去生成一个字节数组。要是可以用ADO控件就很方便了，可是由于安全性原因无法调用ADO。所以只能使用HEX编码去生成一个字节数组。就是这个地方多经过了一次HEX编码消耗了效率，如果找到其它方法直接得到字节数组来直接转换就可以比传统的方法快了。
　　非IE浏览器有btoa和atob，这两个是BASE64编码和解码。这两个函数最要命的就是只能转换单字节的字符，不过我们可以先用做个转换，把多字节字符串转成单字节的。
　　这几个就是最基本的BASE64编码方法，至于解码我暂时就不整理了（懒）。不过也是类似的，如果明白了上面例子中的几种编码的原理，解码也是一样简单的。

转载请注明：前端录»JavaScript BASE64的编码

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=20-77-2"></script>