javascript使用btoa和atob来进行Base64转码和解码


Posted in Javascript onMarch 20, 2017

javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用。当前html5标准正式化之际,Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现。

好了,前言说了一大堆,Base64转码和解码有哪些方法:

一.我们来看看,在javascript中如何使用Base64转码

var str = 'javascript';

window.btoa(str)
//转码结果 "amF2YXNjcmlwdA=="

window.atob("amF2YXNjcmlwdA==")
//解码结果 "javascript"

二.对于转码来说,Base64转码的对象只能是字符串,因此来说,对于其他数据还有这一定的局限性,在此特别需要注意的是对Unicode转码。

var str = "China,中国"
window.btoa(str)

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

很明显,这种方式是不行的,那么如何让他支持汉字呢,

这就要使用window.encodeURIComponent和window.decodeURIComponent

var str = "China,中国";
window.btoa(window.encodeURIComponent(str))
//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="

window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))
//"China,中国"

btoa与atob的使用方法就是这么简单,大家可以尝试一下。希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
检测jQuery.js是否已加载的判断代码
May 20 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
vue.js事件处理器是什么
Mar 20 #Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 #Javascript
Vue.js基础学习之class与样式绑定
Mar 20 #Javascript
详解Vue中添加过渡效果
Mar 20 #Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 #Javascript
JavaScript 过滤关键字
Mar 20 #Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 #Javascript
You might like
PHP异常处理Exception类
2015/12/11 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
python MD5加密的示例
2020/10/19 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
新电JAVA笔试题目
2014/08/31 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
高中化学教学反思
2014/01/13 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
停车场管理制度范本
2015/08/05 职场文书
上班旷工检讨书
2015/08/15 职场文书
导游词之西递宏村
2019/12/10 职场文书
python实现双链表
2022/05/25 Python