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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
vue移动端路由切换实例分析
May 14 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 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中几种常见的超时处理全面总结
2012/09/11 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
js实现蒙版效果
2020/01/11 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
如何利用python查找电脑文件
2018/04/27 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
python实现扫雷小游戏
2020/04/24 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
年度考核自我鉴定
2014/02/02 职场文书
《月迹》教学反思
2014/02/19 职场文书
感恩教育活动总结
2014/05/05 职场文书
专家推荐信模板
2014/05/09 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
音乐节策划方案
2014/06/09 职场文书
甘南现象心得体会
2014/09/11 职场文书
超市开店计划书
2014/09/15 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书