用JS进行Base64编码、解码

JavaScript09

用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 方法,如下:

/**

* 将base64的数据转换成一个Blob对象

* @param {Object} b64Data base64数据

* @param {Object} contentType 数据类型

* @param {Object} sliceSize 分片大小

*/

function b64toBlob(b64Data, contentType, sliceSize) {

    let b = b64Data.toString()

    b64Data = b.split(',')[1]

    var byteCharacters =atob(b64Data)

    var byteArrays = []

    for (let offset =0offset <byteCharacters.lengthoffset += sliceSize) {

        var slice = byteCharacters.slice(offset, offset + sliceSize)

        var byteNumbers =new Array(slice.length)

        for (let i =0i <slice.lengthi++) {

            byteNumbers[i] = slice.charCodeAt(i)

        }

        var byteArray =new Uint8Array(byteNumbers)

        byteArrays.push(byteArray)

    }

    var blob =new Blob(byteArrays, {type: contentType})

    return blob

}

/**

* 将Blob对象转换为file对象

* @param {Object} theBlob blob对象

* @param {Object} fileName 文件名称

*/

function blobToFile(theBlob,fileName) {

    theBlob.lastModifiedDate =new Date()

    theBlob.name = fileName

    return theBlob

}

// 创建一个reader

let reader =new FileReader()

// 将图片转成 base64 格式

reader.readAsDataURL(file)

/**

* 将base64转换为文件

* @param dataurl base64格式数据

* @param filename 文件名

* @param filetype 文件类型

* @returns {File} 二进制流文件

*/

function dataURLtoFile(dataurl,filename,filetype) {

    var arr = dataurl.split(","),

    bstr =atob(arr[1]),

    n = bstr.length,

    u8arr =new Uint8Array(n)

    while (n--) {

        u8arr[n] = bstr.charCodeAt(n)

    }

    return new File([u8arr], filename, {

        type: filetype

    })

}