解析原来浏览器原生支持JS Base64编码解码

上次给大家分享了如何用js实现剪切板粘贴上传图片，今天跟大家分享下JS Base64编码解码。

1. 基础不牢，选型糟糕

糟糕的技术选型往往源自自身技术广度不足。就在数月前，一个前端HTML字符信息转Base64的需求，我是毫不犹豫去找了个开源的base64.js。使用很简单，浏览器引入该JS文件，然后Base64编码这样：

解码就调用decode方法，如下：

数据准确，功能良好。当时弄完还洋洋得意，以为是个完美的解决。结果，今天发现，尼玛原来浏览器很早就支持了JS Base64加密解密，而上面这种洋洋得意的做法完全就是瞎子点灯——白费蜡！根本就不是一个好的技术选型。

由于技术广度掌握不足，或者说JS基础掌握不牢，导致浪费了大把时间去找Base64的JS语言库，学习其API用法，换来一个冗余完全不需要加载的JS，现在来看，真是个糟糕的技术选型。

2. 原生atob和btoa方法

实际上，从IE10+浏览器开始，所有浏览器就原生提供了Base64编码解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。

方法名就是atob和btoa，具体语法如下：

1）Base64解码

语法为（浏览器中）：

var decodedData = window.atob(encodedData);

或者（浏览器或js Worker线程中）：

var decodedData = self.atob(encodedData);

例如：

window.atob('emhhbmd4aW54dQ==');

// 返回：'zhangxinxu'

atob这个方法名称乍一看，很奇怪，不知道这个单词什么意思。我们可以理解为 A to B，也就是从A到B。这里的B指的就是Base64吗？哈哈哈，恭喜你！猜错了！A指的才是Base64，反的，B才是普通字符，普通意思就是low，俗称low B。所以我们这么记忆，Low B，Low B，B表示很Low的普通字符，A才是Base64，和首字母对应关系是反的。

因此，atob表示Base64字符to普通字符，也就是Base64解码。

2）Base64编码

语法为（浏览器中）：

var encodedData = window.btoa(stringToEncode);

或者（浏览器或js Worker线程中）：

var encodedData = self.btoa(stringToEncode);

例如：

window.btoa('zhangxinxu');

// 返回：'emhhbmd4aW54dQ=='

btoa这个方法名称乍一看，很奇怪，不知道这个单词什么意思。我们可以理解为 B to A，也就是从B到A。那B指什么，A指什么呢？和atob方法一样，B指的是low B普通字符串，A指的是Base64字符。

因此，btoa方法表示low B普通字符to Base64字符，也就是Base64编码。

3. IE8/IE9的polyfill

当下，仍有不少PC项目还需要兼容IE9，所以，我们可以专门针对这些浏览器再引入一段ployfill脚本或者一个JS文件即可。

实际使用，我们可以借助IE条件注释无缝对接。也就是HTML中嵌入下面一段代码：

[if IE]表示所有IE浏览器，由于IE10+浏览器已经放弃了著名的IE条件注释的支持，Chrome等浏览器本身就不支持这个IE私有语法，因此，很天然的，上面一段script引入只在IE9-浏览器下有效。而我们本来就希望只IE8，IE9浏览器引入ployfill，于是正好完美衔接上。

也就是原生支持atob和btoa方法的浏览器认为就是一段无需关心的HTML注释，不支持atob和btoa的IE9及其以下浏览器则会加载我们的base64-polyfill.js，使浏览器也支持window.btoa和window.atob这个语法。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Js实现Base64编码与解码

    Base64是一种基于64个可打印字符来表示二进制数据的表示方法.由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符. Base64常用于在通常处理文本数据的场合,表示.传输.存储一些二进制数据.包括MIME的email,email via MIME, 在XML中存储复杂数据. 1.加密解密方法使用: //1.加密 var str = '124中文内容'; var base = new Base64(); var result = base.encode(str); //doc

  • javascript中的Base64、UTF8编码与解码详解

    Base64编码说明 Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='. base64编码库:(已验证可用) 复制代码 代码如下: var base64 = (function(){     var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmn

  • JS 实现Base64编码与解码实例详解

    Js实现Base64编码与解码 Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍. Base64是一种基于64个可打印字符来表示二进制数据的表示方法.由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符. Base64常用于在通常处理文本数据的场合,表示.传输.存储一些二进制数据.包括MIME的email,email via MIME, 在XML中存储复杂数据.

  • JavaScript Base64编码和解码，实现URL参数传递。

    为什么需要对参数进行编码?相信有过开发的经验的广大程序员都知道,在Web中,若是直接在Url地址上传递参数值,若是中文,或者+等什么的就会出现乱码现象,若是数字或者英文的好象没有什么问题,简言之,传递过来的参数是需要进行编码的.在这里,也许有人会说,为什么不直接用Server.UrlDecode和Server.UrlEncode这两个来进行编码和解码的操作呢? 的确,这两个服务器端对象很好使用,用起来也很方便,但是,若在客户端是HTML的Input,查询的时候页面是HTML或者其他的,反正不是.

  • AngularJS实现的base64编码与解码功能示例

    AngularJS实现的base64编码与解码功能示例

    本文实例讲述了AngularJS实现的base64编码与解码功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>base64加密</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js&qu

  • js对图片base64编码字符串进行解码并输出图像示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 解析原来浏览器原生支持JS Base64编码解码

    解析原来浏览器原生支持JS Base64编码解码

    上次给大家分享了如何用js实现剪切板粘贴上传图片,今天跟大家分享下JS Base64编码解码. 1. 基础不牢,选型糟糕 糟糕的技术选型往往源自自身技术广度不足.就在数月前,一个前端HTML字符信息转Base64的需求,我是毫不犹豫去找了个开源的base64.js.使用很简单,浏览器引入该JS文件,然后Base64编码这样: 解码就调用decode方法,如下: 数据准确,功能良好.当时弄完还洋洋得意,以为是个完美的解决.结果,今天发现,尼玛原来浏览器很早就支持了JS Base64加密解密,而上面

  • node.js学习之base64编码解码

    node.js学习之base64编码解码

    一. Base64编码由来 为什么会有Base64编码呢?因为有些网络传送渠道并不支持所有的字节,例如传统的邮件只支持可见字符的传送,像ASCII码的控制字符就 不能通过邮件传送.这样用途就受到了很大的限制,比如图片二进制流的每个字节不可能全部是可见字符,所以就传送不了.最好的方法就是在不改变传统协议的情 况下,做一种扩展方案来支持二进制文件的传送.把不可打印的字符也能用可打印字符来表示,问题就解决了.Base64编码应运而生,Base64就是一种 基于64个可打印字符来表示二进制数据的表示方法

  • Java JDK1.7对字符串的BASE64编码解码方法

    如下所示: package cn.itcast; import java.io.IOException; import java.io.UnsupportedEncodingException; import org.junit.Test; import sun.misc.BASE64Decoder; /* * @author soto * BASE64编码 解码 * */ public class Demo1 { @Test public void fun1() throws IOExcept

  • 用XMLDOM和ADODB.Stream实现base64编码解码实现代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> 用 XMLDOM 和 ADODB.Stream 实现base64编码解码 </title> <meta http-equiv="Content-Type" content="text/html; cha

  • Base64编码解码原理及C#编程实例

    Base64编码解码原理及C#编程实例

    一. Base64编码由来 为什么会有Base64编码呢?因为有些网络传送渠道并不支持所有的字节,例如传统的邮件只支持可见字符的传送,像ASCII码的控制字符就不能通过邮件传送.这样用途就受到了很大的限制,比如图片二进制流的每个字节不可能全部是可见字符,所以就传送不了.最好的方法就是在不改变传统协议的情况下,做一种扩展方案来支持二进制文件的传送.把不可打印的字符也能用可打印字符来表示,问题就解决了.Base64编码应运而生,Base64就是一种基于64个可打印字符来表示二进制数据的表示方法. 二

  • Python base64编码解码实例

    Python中进行Base64编码和解码要用base64模块,代码示例: #-*- coding: utf-8 -*- import base64 str = 'cnblogs' str64 = base64.b64encode(str) print str64 #Y25ibG9ncw== print base64.b64decode(str64) #cnblogs

  • js 显示base64编码的二进制流网页图片

    Data URI scheme. Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入.比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张2*2的白色gif图片. 在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据. 目前,Data URI sc

  • JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)

    本文实例讲述了JS实现对中文字符串进行utf-8的Base64编码的方法.分享给大家供大家参考,具体如下: 要进行编码的字符串:"select 用户名 from 用户" 使用JAVA进行编码,Java程序: String sql = "select 用户名 from 用户"; String encodeStr = new String(Base64.encode(sql.getBytes("UTF-8"))); // 编码 System.out.

  • jQuery实现返回顶部功能适合不支持js的浏览器

    jQuery实现返回顶部功能适合不支持js的浏览器

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top" rel="external nofollow" ><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top&qu

随机推荐