js怎么实现base64、url和blob之间相互转换

在前端开发中，我们经常需要处理各种数据格式的转换，尤其是Base64、URL和Blob之间的相互转换。这些转换在文件上传、图片处理、数据存储等场景中非常常见。本文将详细介绍如何使用JavaScript实现这些转换。

1. Base64 转 Blob

Base64是一种常见的编码格式，通常用于在网络上传输二进制数据。将Base64字符串转换为Blob对象可以方便地进行文件操作。

function base64ToBlob(base64, mimeType) {
    const byteCharacters = atob(base64.split(',')[1]);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    return new Blob([byteArray], { type: mimeType });
}

// 示例
const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
const blob = base64ToBlob(base64String, 'image/png');

2. Blob 转 Base64

将Blob对象转换为Base64字符串可以方便地在网页中显示图片或进行数据传输。

function blobToBase64(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
}

// 示例
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
blobToBase64(blob).then(base64 => {
    console.log(base64);
});

3. URL 转 Blob

有时候我们需要将URL指向的资源转换为Blob对象，以便进行进一步的处理。

function urlToBlob(url) {
    return fetch(url)
        .then(response => response.blob());
}

// 示例
const url = 'https://example.com/image.png';
urlToBlob(url).then(blob => {
    console.log(blob);
});

4. Blob 转 URL

将Blob对象转换为URL可以方便地在网页中显示图片或进行文件下载。

function blobToUrl(blob) {
    return URL.createObjectURL(blob);
}

// 示例
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const url = blobToUrl(blob);
console.log(url);

5. Base64 转 URL

将Base64字符串直接转换为URL可以方便地在网页中显示图片。

function base64ToUrl(base64) {
    return base64;
}

// 示例
const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
const url = base64ToUrl(base64String);
console.log(url);

6. URL 转 Base64

将URL指向的资源转换为Base64字符串可以方便地进行数据存储或传输。

function urlToBase64(url) {
    return fetch(url)
        .then(response => response.blob())
        .then(blob => blobToBase64(blob));
}

// 示例
const url = 'https://example.com/image.png';
urlToBase64(url).then(base64 => {
    console.log(base64);
});

总结

通过以上方法，我们可以轻松地在Base64、URL和Blob之间进行转换。这些转换在前端开发中非常实用，尤其是在处理文件上传、图片显示和数据传输时。掌握这些技巧可以帮助我们更高效地处理各种数据格式。