用JS进行Base64编码、解码

JavaScript07

用JS进行Base64编码、解码,第1张

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

方法名就是 atob 和 btoa ,具体语法如下:

IE8/IE9的polyfill

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

[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 这个语法。

开源的 base64.js ,使用很简单,浏览器引入该JS文件,然后Base64编码这样:

解码就调用 decode 方法,如下:

获取到上传的文件myfile,创建一个fileRead文件对象,使用readAsDataURL方法可以将读取到的文件编码成Data URL。文件加载成功后,e.target.result就是文件图片所对应的base64编码。直接赋值给img的src,就能显示图片。

下面是onload里e对象打印的结果,可以看出e.target.result是文件图片的信息。

下面打印的是base64的编码,可以在img的src中直接引用,或者复制到浏览器搜索框里也能直接搜索图片。

使用canvas画一个填充色为红色的矩形,试点按钮后,使用canvas.toDataURL方法:返回一个包含图片展示的 data URI 。可以使用type参数其类型,默认为 PNG 格式。把得到的base64编码赋给img的src,显示图片。

结果图如下:

两种图片的base64的方法都很实用,项目开发中可能会遇到,今天来分享给大家。