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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
微信小程序实现星级评价
Nov 20 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
JavaScript生成简单等差数列
2017/11/28 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python流程控制 if else实现解析
2019/09/02 Python
详解Python3中的 input() 函数
2020/03/18 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
文员岗位职责
2013/11/09 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python