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 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 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
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
Python中bisect的用法
2014/09/23 Python
python代码实现ID3决策树算法
2017/12/20 Python
python 日期操作类代码
2018/05/05 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
求职信写作要突出重点
2014/01/01 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
软件售后服务承诺书
2014/05/21 职场文书
公司证明怎么写
2014/09/22 职场文书
2015政治思想表现评语
2015/03/25 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫