JS 实现Base64编码与解码实例详解


Posted in Javascript onNovember 07, 2016

Js实现Base64编码与解码

Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符。

Base64常用于在通常处理文本数据的场合,表示、传输、存储一些二进制数据。包括MIME的email,email via MIME, 在XML中存储复杂数据。

1.加密解密方法使用:

//1.加密 
var str = '124中文内容'; 
var base = new Base64(); 
var result = base.encode(str); 
//document.write(result); 
//2.解密 
var result2 = base.decode(result); 
document.write(result2);

2.加密、解密算法封装:

/** 
* 
* Base64 encode / decode 
* 
* @author haitao.tu 
* @date 2010-04-26 
* @email tuhaitao@foxmail.com 
* 
*/ 
function Base64() { 
 
 // private property 
 _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 
 
 // public method for encoding 
 this.encode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = _utf8_encode(input); 
  while (i < input.length) { 
   chr1 = input.charCodeAt(i++); 
   chr2 = input.charCodeAt(i++); 
   chr3 = input.charCodeAt(i++); 
   enc1 = chr1 >> 2; 
   enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
   enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
   enc4 = chr3 & 63; 
   if (isNaN(chr2)) { 
    enc3 = enc4 = 64; 
   } else if (isNaN(chr3)) { 
    enc4 = 64; 
   } 
   output = output + 
   _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + 
   _keyStr.charAt(enc3) + _keyStr.charAt(enc4); 
  } 
  return output; 
 } 
 
 // public method for decoding 
 this.decode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3; 
  var enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 
  while (i < input.length) { 
   enc1 = _keyStr.indexOf(input.charAt(i++)); 
   enc2 = _keyStr.indexOf(input.charAt(i++)); 
   enc3 = _keyStr.indexOf(input.charAt(i++)); 
   enc4 = _keyStr.indexOf(input.charAt(i++)); 
   chr1 = (enc1 << 2) | (enc2 >> 4); 
   chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
   chr3 = ((enc3 & 3) << 6) | enc4; 
   output = output + String.fromCharCode(chr1); 
   if (enc3 != 64) { 
    output = output + String.fromCharCode(chr2); 
   } 
   if (enc4 != 64) { 
    output = output + String.fromCharCode(chr3); 
   } 
  } 
  output = _utf8_decode(output); 
  return output; 
 } 
 
 // private method for UTF-8 encoding 
 _utf8_encode = function (string) { 
  string = string.replace(/\r\n/g,"\n"); 
  var utftext = ""; 
  for (var n = 0; n < string.length; n++) { 
   var c = string.charCodeAt(n); 
   if (c < 128) { 
    utftext += String.fromCharCode(c); 
   } else if((c > 127) && (c < 2048)) { 
    utftext += String.fromCharCode((c >> 6) | 192); 
    utftext += String.fromCharCode((c & 63) | 128); 
   } else { 
    utftext += String.fromCharCode((c >> 12) | 224); 
    utftext += String.fromCharCode(((c >> 6) & 63) | 128); 
    utftext += String.fromCharCode((c & 63) | 128); 
   } 
 
  } 
  return utftext; 
 } 
 
 // private method for UTF-8 decoding 
 _utf8_decode = function (utftext) { 
  var string = ""; 
  var i = 0; 
  var c = c1 = c2 = 0; 
  while ( i < utftext.length ) { 
   c = utftext.charCodeAt(i); 
   if (c < 128) { 
    string += String.fromCharCode(c); 
    i++; 
   } else if((c > 191) && (c < 224)) { 
    c2 = utftext.charCodeAt(i+1); 
    string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 
    i += 2; 
   } else { 
    c2 = utftext.charCodeAt(i+1); 
    c3 = utftext.charCodeAt(i+2); 
    string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 
    i += 3; 
   } 
  } 
  return string; 
 } 
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 #Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 #Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 #Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 #Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 #Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 #Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 #Javascript
You might like
PHP自定义函数收代码
2010/08/01 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python操作SQLite简明教程
2014/07/10 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
django静态文件加载的方法
2018/05/20 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
浅析Python面向对象编程
2020/07/10 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
"序列点" 是什么
2016/07/29 面试题
2019年.net常见面试问题
2012/02/12 面试题
2014年父亲节活动方案
2014/03/06 职场文书
经典洗发水广告词
2014/03/13 职场文书
文案策划求职信
2014/04/14 职场文书
服装发布会策划方案
2014/05/22 职场文书
研讨会通知
2015/04/27 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
nginx.conf配置文件结构小结
2022/04/08 Servers