方法名就是 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
})
}