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 相关文章推荐
自动更新作用
Oct 08 Javascript
取得父标签
Nov 14 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
javascript实现Table排序的方法
May 15 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
Symfony生成二维码的方法
2016/02/04 PHP
php创建图像具体步骤
2017/03/13 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
javascript闭包的高级使用方法实例
2013/07/04 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python基础教程之while循环
2019/08/14 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
读群众路线的心得体会
2014/09/03 职场文书
个人委托书如何写
2014/09/25 职场文书
工作经验交流材料
2014/12/30 职场文书
新员工入职欢迎词
2015/01/23 职场文书
出生证明格式
2015/06/15 职场文书
单位同意报考证明
2015/06/17 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers