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 相关文章推荐
JavaScript.Encode手动解码技巧
Jul 14 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
node使用promise替代回调函数
May 07 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
浅入深出Vue之自动化路由
Aug 06 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
实现获取http内容的php函数分享
2014/02/16 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
使用Python对Access读写操作
2017/03/30 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
一些Solaris面试题
2013/03/22 面试题
店长岗位职责
2013/11/21 职场文书
syb养殖创业计划书
2014/01/09 职场文书
感恩节活动方案
2014/01/27 职场文书
简历的自我评价
2014/02/03 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
新生入学欢迎词
2015/01/26 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书