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之更有效率的字符串替换
Aug 02 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php目录操作实例代码
2014/02/21 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
老生常谈js数据类型
2017/08/03 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python通过future处理并发问题
2017/10/17 Python
解析Python3中的Import
2019/10/13 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
回门宴新郎答谢词
2014/01/12 职场文书
对孩子的寄语
2014/04/09 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
委托证明书
2014/09/17 职场文书
同学聚会感言一句话
2015/07/30 职场文书
装修安全责任协议书
2016/03/22 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js