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压缩利器
Feb 20 Javascript
js 对象是否存在判断
Jul 15 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
微信小程序制作表格的方法
Feb 14 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
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
最短的IE判断代码
2011/03/13 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
js实现分页功能
2017/05/24 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python交易记录链的实现过程详解
2019/07/03 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
相亲活动方案
2014/08/26 职场文书
政风行风评议工作总结
2014/10/21 职场文书
表扬稿范文
2015/01/17 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python