Blob转Base64与Blob转File的JavaScript实现方法详解

简介：本文详解如何使用JavaScript将Blob对象转换为Base64编码，以及如何将Blob转换为File对象，包含多种实现方式与代码示例，适合前端开发者参考学习

blob转base64

第一种方法：

function blobToBase64(blob, callback) { //blob转base64    
    let reader = new FileReader();
    reader.onload = function(e) {
        callback(e.target.result);
    }
    reader.readAsDataURL(blob);
}

第二种方法：

使用canvas将Blob对象转换为Base64编码的字符串，可以通过以下步骤实现：

1. 将Blob对象绘制到canvas上：首先，你需要将Blob对象转换为一个图像，然后将其绘制到canvas上
2. 从canvas获取Base64编码的字符串：使用canvas.toDataURL()方法，可以将canvas上的内容转换为Base64编码的字符串

// 假设你有一个Blob对象，例如从文件输入中获取
const blob = new Blob(["Hello, world!"], { type: 'text/plain'});
// 将Blob对象转换为Base64编码的字符串
function blobToBase64(blob) {
    return new Promise((resolve, reject) => {
        // 创建一个Image对象
        const img = new Image();
        img.crossOrigin = 'Anonymous';
        // 处理跨域问题    
        // 图像加载完成后，将其绘制到canvas上
        img.onload = function() {// 创建canvas元素
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        // 将canvas内容转换为Base64编码的字符串
        const base64 = canvas.toDataURL('image/png');
            resolve(base64);
        };
        // 处理图像加载失败的情况
        img.onerror = function() {
            reject(new Error('Failed to load image.'));
        };
        // 将Blob对象转换为URL，并设置为图像源
        img.src = URL.createObjectURL(blob);
    });
}
// 使用方法
blobToBase64(blob).then(base64=>{
    console.log(base64);// 输出Base64编码的字符串
}).catch(error=>{
    console.error(error);
});

blob转file

第一种方法：

function blobToBase64(blob, callback) {
    // 创建FileReader对象
    const reader = new FileReader();
    // 设置onload事件处理函数，当读取操作完成时被调用
    reader.onload = function() {
        // 调用回调函数，并传入Base64编码的字符串
        callback(reader.result);
    }
    // 读取Blob对象，并将其转换为Base64编码的字符串
    reader.readAsDataURL(blob);
}
// 使用方法
// 假设你有一个Blob对象，例如从文件输入中获取
const blob = new Blob(["Hello, world!"], { type: 'text/plain' });
// 调用函数并传入Blob对象和回调函数
blobToBase64(blob,function(base64) {
    console.log(base64);// 输出Base64编码的字符串
});

第二种方法：

function blobToFile(blob, fileName){ // blob转file	
    blob.lastModifiedDate = new Date();
    blob.name = fileName; 
    return blob;
};

 

有遗漏或者不对的可以在我的公众号留言哦