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 相关文章推荐
json2.js的初步学习与了解
Oct 06 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
Vue组件基础用法详解
Feb 05 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 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连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
两种php实现图片上传的方法
2016/01/22 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
Dom 结点创建 基础知识
2011/10/01 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
React实现todolist功能
2020/12/28 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
详解python 发送邮件实例代码
2016/12/22 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
求职简历自荐信范文
2013/10/21 职场文书
银行实习鉴定
2013/12/13 职场文书
业务员简历自我评价
2014/03/06 职场文书
消防安全责任书范本
2014/04/15 职场文书
公司踏青活动方案
2014/08/16 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
2015双创工作总结
2015/07/24 职场文书
村官2015年度工作总结
2015/10/14 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
使用python绘制分组对比柱状图
2022/04/21 Python