上次和大家分享了如何用js粘贴上传图片。今天就和大家分享JS Base64编解码。

1.基础不牢，选品不好

技术选择不佳往往源于技术广度不足。就在几个月前，我毫不犹豫地找到了一个开源的Base64.js，用于将HTML字符信息转换为Base64的需求。使用非常简单，浏览器引入JS文件，然后Base64这样编码：

解码时调用解码方法，如下所示：

数据准确，功能良好。当时我很得意，觉得这是一个完美的解决方案。结果今天发现尼玛原来的浏览器很早就支持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(' emhhbmd 4 aw 54 Dq==')；//返回：‘张新旭’atob。乍一看，这个方法的名字很奇怪。我不知道这个词的意思。我们可以理解为A到B，也就是从A到B，这里的B是指Base64吗？哈哈哈，恭喜你！猜错了！a指的是Base64，但反过来说，B是普通字符，意思是低，俗称低B.所以我们记住Low B、Low B、B代表非常Low的普通字符，a是Base64，与首字母的对应关系相反。

所以atob的意思是Base64字符到普通字符，也就是Base64解码。

2)Base64编码

语法是(在浏览器中):

var encodedData=window . btoa(stringToEncode)；或者(在浏览器或js Worker线程中):

var encodedData=self . btoa(stringToEncode)；例如：

window . btoa(' Zhang xinxu ')；//Return:' emhhbmd 4 aw 54 dq==' btoa。乍一看，这个方法名字很奇怪。我不知道这个词是什么意思。我们可以理解为B到A，也就是从B到A，B是什么意思，A是什么意思？与atob方法一样，B指低B普通字符串，a指Base64字符。

因此，btoa方法将低B普通字符表示为Base64字符，即Base64编码。

3.IE8/IE9的聚合接口

目前还有很多PC项目需要兼容IE9，所以我们可以专门针对这些浏览器引入一个ployfill脚本或者JS文件。

在实践中，我们可以与IE条件注释无缝连接。也就是说，以下代码嵌入在HTML中：

[if IE]表示所有IE浏览器。由于IE10浏览器已经放弃了对著名的IE条件注释的支持，所以Chrome等浏览器并不支持这种IE私有语法。因此，自然上述脚本的介绍只在IE9- browser下有效。我们最初希望只有IE8和IE9浏览器会引入ployfill，这正是完美的连接。

也就是说，原本支持atob和btoa方法的浏览器认为这是一个不需要注意的HTML注释。不支持atob和btoa的IE9及以下版本的浏览器将加载我们的base64-polyfill.js，这样浏览器也支持window.btoa和window.atob的语法.

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