Base64,Blob,File格式图片文件格式转换

原创已于 2023-04-22 11:45:14 修改 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-08-04 15:56:05 首次发布

文件处理专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用JavaScript将Base64编码的图像转换为Blob和File对象，以便进行服务器上传。通过base64ToBlob函数解析Base64数据，blobToFile进一步转换为File对象，适用于多种图片格式。

基于JavaScript的图片文件格式转换示例，它可以将Base64编码的图像转换为Blob对象，然后将Blob对象转换为File对象，以便可以将其上传到服务器。

// 将base64编码的图片转换为Blob对象
function base64ToBlob(base64Data, contentType) {
    contentType = contentType || '';
    const sliceSize = 1024;
    const byteCharacters = atob(base64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

// 将Blob对象转换为File对象
function blobToFile(blob, fileName) {
    const file = new File([blob], fileName, {type: blob.type});
    return file;
}

// 将Base64编码的图片转换为File对象
function base64ToFile(base64Data, fileName, contentType) {
    const blob = base64ToBlob(base64Data, contentType);
    const file = blobToFile(blob, fileName);
    return file;
}

// 使用示例
const base64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AUNEBgSNhViHQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAARnQU1BAACxjwv8YQUAAADaSURBVHjapFJZDcJAEIYvz7/A4CUKhYDDJ8D3wM5Q5SRTdWEJnUlXBhXBGQRgQKjWEYsY+LsPZT6TlK6BfU6Bn+z6+Kfvv1zvmJWYy+LzayRCCiqQCakKUCoEwqCqAKqQqQCqAKAKqQqQC0mxiug5J5G5g4Z4mzwqlWlKp0noVldR9Xp9Cg+L1exf1KLOtnFlAAAAAElFTkSuQmCC';
const fileName = 'image.png';
const file = base64ToFile(base64Data, fileName, 'image/png');
console.log(file);

示例中的 base64ToBlob() 函数将Base64编码的数据转换为Blob对象。它使用 atob() 函数解码Base64数据，然后将字节转换为数组，最后创建一个Blob对象。 blobToFile() 函数将Blob对象转换为File对象，需要传递一个文件名和文件类型。最后，base64ToFile() 函数将使用这两个函数将Base64编码的图像转换为File对象。

示例中只转换了PNG格式的图像文件，但是可以根据需要修改代码以支持其他类型