w

使用示例

基础示例

文本编码示例

// 编码简单文本
const text = 'Hello, World!';
const encoded = btoa(text);
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

文本解码示例

// 解码Base64字符串
const encoded = 'SGVsbG8sIFdvcmxkIQ==';
const decoded = atob(encoded);
console.log(decoded); // "Hello, World!"

高级示例

URL安全编码

// 标准Base64编码
const standard = btoa('Hello World');
console.log(standard); // "SGVsbG8gV29ybGQ="

// URL安全编码
const urlSafe = standard.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
console.log(urlSafe); // "SGVsbG8gV29ybGQ"

文件编码示例

// 读取文件并编码
function encodeFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const base64 = reader.result.split(',')[1];
      resolve(base64);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 使用示例
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (file) {
    try {
      const encoded = await encodeFile(file);
      console.log('文件编码结果:', encoded);
    } catch (error) {
      console.error('编码失败:', error);
    }
  }
});

实际应用场景

1. 图片内联到HTML

<!-- 将Base64编码的图片直接嵌入HTML -->
<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
  alt="示例图片"
/>

2. CSS背景图片

/* 在CSS中使用Base64编码的图片 */
.background {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==');
}

3. JSON数据传输

// 在JSON中传输二进制数据
const data = {
  name: 'example.txt',
  content: 'SGVsbG8gV29ybGQ=', // Base64编码的文件内容
  type: 'text/plain',
};

// 发送到服务器
fetch('/api/upload', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
});

4. 邮件附件处理

// 创建邮件附件
function createEmailAttachment(filename, content, mimeType) {
  return {
    filename: filename,
    content: btoa(content), // Base64编码
    encoding: 'base64',
    type: mimeType,
  };
}

// 使用示例
const attachment = createEmailAttachment('document.pdf', pdfContent, 'application/pdf');

错误处理示例

输入验证

function validateBase64(input) {
  try {
    // 检查输入是否为空
    if (!input || input.trim() === '') {
      throw new Error('输入不能为空');
    }

    // 检查字符集
    const validChars = /^[A-Za-z0-9+/]*={0,2}$/;
    if (!validChars.test(input)) {
      throw new Error('包含无效的Base64字符');
    }

    // 尝试解码
    atob(input);
    return true;
  } catch (error) {
    console.error('Base64验证失败:', error.message);
    return false;
  }
}

文件大小检查

function checkFileSize(file, maxSize = 10 * 1024 * 1024) {
  if (file.size > maxSize) {
    throw new Error(`文件大小超过限制 (${maxSize / 1024 / 1024}MB)`);
  }
  return true;
}

性能优化示例

大文件分块处理

function encodeLargeFile(file, chunkSize = 1024 * 1024) {
  return new Promise((resolve, reject) => {
    const chunks = [];
    let offset = 0;

    function readChunk() {
      const chunk = file.slice(offset, offset + chunkSize);
      const reader = new FileReader();

      reader.onload = (e) => {
        chunks.push(btoa(e.target.result));
        offset += chunkSize;

        if (offset < file.size) {
          readChunk();
        } else {
          resolve(chunks.join(''));
        }
      };

      reader.onerror = reject;
      reader.readAsBinaryString(chunk);
    }

    readChunk();
  });
}
这个页面对您有帮助吗?