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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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之真OO
2006/10/09 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php防攻击代码升级版
2010/12/29 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
js电话号码验证方法
2015/09/28 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
JavaScript实现京东放大镜效果
2019/12/03 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
python中as用法实例分析
2015/04/30 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
《去年的树》教学反思
2014/04/11 职场文书
员工离职证明范本
2015/06/12 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS