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 相关文章推荐
Javascript 面试题随笔
Mar 31 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
JS实现可控制的进度条
Mar 25 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php 获取mysql数据库信息代码
2009/03/12 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python的faker库用法
2019/11/28 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
《再见了,亲人》教学反思
2014/02/26 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
创业计划书之书店
2019/09/10 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Python中time标准库的使用教程
2022/04/13 Python