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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
js三种排序算法分享
Aug 16 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
vue实现匀速轮播效果
Jun 29 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实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
php数组遍历类与用法示例
2019/05/24 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
jQuery参数列表集合
2011/04/06 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
缓刑人员的思想汇报
2014/01/11 职场文书
社会公德演讲稿
2014/05/20 职场文书
拓展训练激励口号
2014/06/17 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
财务会计岗位职责
2015/02/03 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
浅谈MySQL user权限表
2021/06/18 MySQL
纯html+css实现Element loading效果
2021/08/02 HTML / CSS