js怎么實現base64、url和blob之間相互轉換

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之間進行轉換。這些轉換在前端開發中非常實用，尤其是在處理文件上傳、圖片顯示和數據傳輸時。掌握這些技巧可以幫助我們更高效地處理各種數據格式。