JavaScript中的Base64 - 实用示例

// 基础编码和解码

JavaScript为Base64操作提供了内置函数。btoa()和atob()函数处理基础的编码和解码：

这些函数对于ASCII文本工作得很好，但对Unicode字符需要特殊处理。

// 基础Base64编码
const text = '你好世界';
const encoded = btoa(text);
console.log(encoded); // 6L+Z5piv6K+V6K+V

// 基础Base64解码
const decoded = atob(encoded);
console.log(decoded); // 你好世界

// 检查字符串是否为有效的Base64
function isValidBase64(str) {
    try {
        return btoa(atob(str)) === str;
    } catch (err) {
        return false;
    }
}

// UNICODE支持

对于Unicode字符串，我们需要先转换为UTF-8字节。现代浏览器提供TextEncoder和TextDecoder API：

这种方法正确处理表情符号、国际字符和其他Unicode内容。

// Unicode安全的Base64编码
function encodeBase64(str) {
    const encoder = new TextEncoder();
    const bytes = encoder.encode(str);
    const binary = String.fromCharCode(...bytes);
    return btoa(binary);
}

// Unicode安全的Base64解码
function decodeBase64(base64) {
    const binary = atob(base64);
    const bytes = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) {
        bytes[i] = binary.charCodeAt(i);
    }
    const decoder = new TextDecoder();
    return decoder.decode(bytes);
}

// 表情符号示例
const emoji = '你好 👋 世界 🌍';
const encoded = encodeBase64(emoji);
const decoded = decodeBase64(encoded);
console.log(decoded); // 你好 👋 世界 🌍

// 文件处理

将文件转换为Base64对于上传和数据URI很常见。使用FileReader API进行客户端文件处理：

这会创建可以直接嵌入HTML或发送到API的数据URI。

// 将文件转换为Base64数据URI
function fileToBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
        reader.readAsDataURL(file);
    });
}

// 与文件输入一起使用
document.getElementById('fileInput').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (file) {
        try {
            const base64 = await fileToBase64(file);
            console.log(base64);
            // 结果：data:image/png;base64,iVBORw0KGgoAAAA...
        } catch (error) {
            console.error('错误：', error);
        }
    }
});

// URL安全的BASE64

标准Base64使用+和/字符，这些需要URL编码。URL安全的Base64用-和_替换这些字符：

这对于通过URL传输的令牌、ID和其他数据是必需的。

// 转换为URL安全的Base64
function toUrlSafeBase64(base64) {
    return base64
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
}

// 从URL安全的Base64转换
function fromUrlSafeBase64(urlSafeBase64) {
    let base64 = urlSafeBase64
        .replace(/-/g, '+')
        .replace(/_/g, '/');
    
    // 如果需要，添加填充
    const padding = 4 - (base64.length % 4);
    if (padding !== 4) {
        base64 += '='.repeat(padding);
    }
    
    return base64;
}

// 示例
const text = 'URL安全编码测试';
const encoded = btoa(text);
const urlSafe = toUrlSafeBase64(encoded);
console.log(urlSafe); // VVJM5a6J5YWo57yW56CB5rWL6K-V

// 大数据流处理

对于大文件或数据流，分块处理以避免内存问题：

这种方法防止浏览器冻结并有效处理大数据集。

// 基于流的Base64编码
class Base64Encoder {
    constructor() {
        this.buffer = '';
    }
    
    encode(chunk) {
        this.buffer += chunk;
        const completeBytes = Math.floor(this.buffer.length / 3) * 3;
        const toEncode = this.buffer.slice(0, completeBytes);
        this.buffer = this.buffer.slice(completeBytes);
        
        return btoa(toEncode);
    }
    
    flush() {
        if (this.buffer.length > 0) {
            const result = btoa(this.buffer);
            this.buffer = '';
            return result;
        }
        return '';
    }
}

// 使用方法
const encoder = new Base64Encoder();
let result = '';
result += encoder.encode('第一块');
result += encoder.encode('第二块');
result += encoder.flush();
console.log(result);

// 错误处理

始终为Base64操作实现适当的错误处理：

健壮的错误处理防止应用程序崩溃并提供更好的用户体验。

// 带有错误处理的安全Base64操作
function safeEncode(input) {
    try {
        if (typeof input !== 'string') {
            throw new Error('输入必须是字符串');
        }
        return btoa(input);
    } catch (error) {
        console.error('编码错误：', error.message);
        return null;
    }
}

function safeDecode(base64) {
    try {
        // 验证Base64格式
        if (!/^[A-Za-z0-9+/]*={0,2}$/.test(base64)) {
            throw new Error('无效的Base64格式');
        }
        return atob(base64);
    } catch (error) {
        console.error('解码错误：', error.message);
        return null;
    }
}

// 使用方法
const encoded = safeEncode('你好世界');
const decoded = safeDecode(encoded);
if (encoded && decoded) {
    console.log('成功：', decoded);
}