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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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数据库操作类(改自discuz)
2010/07/03 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php防止用户重复提交表单
2015/11/02 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python中遍历文件的3个方法
2014/09/02 Python
用Python实现一个简单的线程池
2015/04/07 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python异步存储数据详解
2019/03/19 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
Sql面试题
2013/03/20 面试题
opencv实现图像几何变换
2021/03/24 Python
庆元旦演讲稿
2014/09/15 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
教师党员自我评价范文
2015/03/04 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android