base64 ---> file

方式一

function base64toFile(base64Data, filename) {
    var arr = base64Data.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {
        type: mime
    });
}

方式二(兼容性好)

 //将base64转换为blob
 function base64toBlob(base64Data) {
     var arr = base64Data.split(','),
         mime = arr[0].match(/:(.*?);/)[1],
         bstr = atob(arr[1]),
         n = bstr.length,
         u8arr = new Uint8Array(n);
     while (n--) {
         u8arr[n] = bstr.charCodeAt(n);
     }
     return new Blob([u8arr], {
         type: mime
     });
 };
 //将blob转换为file
 function blobToFile(theBlob, fileName) {
     theBlob.lastModifiedDate = new Date();
     theBlob.name = fileName;
     return theBlob;
 };

 // 使用
 let blob = base64toBlob(base64Data);
 let file = blobToFile(blob, fileName);

提示

(1) btoa() 方法用于创建一个base64编码的字符串。该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。 语法:window.btoa(str) str 必需项,要编码的字符串 返回值:返回一个base64编码的字符串

可用Buffer.from(str).toString('base64')替代

(2) atob() 方法用于解码使用 base-64 编码的字符串。 语法:window.atob(encodedStr) encodedStr 必需项,一个通过btoa()方法编码的字符串 返回值:返回一个解码的字符串

可用Buffer.from(b64Encoded, 'base64').toString('binary')替代

提示

Uint8Array数组类型表示一个8位无符号整型数组,创建时内容被初始化为0,创建完成后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。 语法格式:

new Uint8Array()
//创建初始化为0的,包含length个元素的无符号整型数组
new Uint8Array(length)

图片URL ---> Base64

function imgURLToBase64(url) {
    return new Promise((resolve, reject) => {
        let canvas = document.createElement('canvas')
        let context = canvas.getContext('2d')
        let img = new Image() //通过构造函数绘制图片实例
        img.crossOrigin = 'Anonymous' //处理图片跨域问题,服务器也需允许跨域
        img.src = url
        img.onload = function() { //该加载过程为异步事件,请先确保获取完整图片
            canvas.width = img.width
            canvas.height = img.height
            context.drawImage(img, 0, 0) //将图片绘制在canvas中
            const URLData = canvas.toDataURL('image/png')
            resolve(URLData)
            canvas = null
        }
        img.onerror = function() {
            reject('图片加载失败');
        }
    })
}

Blob(File) ---> Base64

/**
 * Blob转Base64
 * @param base64 String base64格式字符串
 * 返回值为含有转换结果e.target.result的Promise对象
 */
function blobToBase64(blob) {
    return new Promise((resolve, reject) => {
        var reader = new FileReader()
        reader.readAsDataURL(blob)
        //读取后,result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
        reader.onload = function(e) {
            resolve(e.target.result)
        }
        reader.onerror = function() {
            reject('文件读取失败');
        }
    })

}

发表评论