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+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 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
基于mysql的论坛(4)
2006/10/09 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP中串行化用法示例
2016/11/16 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
JSON与XML优缺点对比分析
2015/07/17 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
浅析python标准库中的glob
2020/03/13 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
函授自我鉴定
2013/11/06 职场文书
公务员转正考察材料
2014/02/07 职场文书
经典广告词大全
2014/03/14 职场文书
新春联欢会主持词
2014/03/24 职场文书
暑假家长评语大全
2014/04/17 职场文书
大学新闻系求职信
2014/06/03 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android