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 相关文章推荐
区分JS中的undefined,null,"",0和false
Mar 08 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
详解用node编写自己的cli工具
May 23 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
JavaScript实现点击自制菜单效果
Feb 02 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 APC缓存配置、使用详解
2014/03/06 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
javascript 保存文件到本地实现方法
2012/11/29 Javascript
Javascript 按位与运算符 (&)使用介绍
2014/02/04 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
Python正则表达式使用经典实例
2016/06/21 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
介绍一下#error预处理
2015/09/25 面试题
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
RIP版本1跟版本2的区别
2013/12/30 面试题
什么是Web Service?
2012/07/25 面试题
公司财务经理岗位职责
2015/04/08 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
python中redis包操作数据库的教程
2022/04/19 Python