Base64 is a method to encode binary data into ASCII strings. It is widely used in data transmission, storage and embedding scenarios. This article explores Base64 principles, applications, methods and security considerations.

1. Base64 Encoding Principles

Base64 uses 64 printable characters to represent binary data. These 64 characters include uppercase letters A-Z, lowercase letters a-z, digits 0-9, and two special characters + and /. The core idea of encoding is to convert binary data into text format so that it can be transmitted in systems that only support text.

Mathematical Principle

The mathematical basis of Base64 is converting binary numbers from base 2 to base 64. Each 6-bit group can represent 2^6 = 64 different values, exactly corresponding to 64 printable characters. Through this conversion, binary data is converted to text while maintaining data integrity and recoverability.

Encoding process: Split every 3 bytes (24 bits) into 4 groups of 6 bits, each group maps to a character in the Base64 character table. If data length is not a multiple of 3, pad with =.

2. Data Size After Base64 Encoding

Base64 encoding increases data size by approximately 33%:

原始数据：3 字节 → Base64：4 字节
原始数据：1000 字节 → Base64：约 1334 字节

3. Base64 Operations in JavaScript

3.1 btoa - Encode

const text = 'Hello, World!';
const encoded = btoa(text);
// SGVsbG8sIFdvcmxkIQ==

3.2 atob - Decode

const encoded = 'SGVsbG8sIFdvcmxkIQ==';
const decoded = atob(encoded);
// Hello, World!

3.3 Handling UTF-8 Strings

btoa does not support direct UTF-8 encoding, needs conversion first:

function utf8ToBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

function base64ToUtf8(str) {
  return decodeURIComponent(escape(atob(str)));
}

const chinese = '土豆丝工具';
const encoded = utf8ToBase64(chinese);
// 5p2O6Iqx5bCP5bel5bel

const decoded = base64ToUtf8(encoded);
// 土豆丝工具

4. Common Application Scenarios

4.1 Data URI

Embedding images in HTML:

<img src="data:image/png;base64,iVBORw0KGgo..." alt="logo">

4.2 Email Attachments

SMTP protocol mainly handles text data, binary attachments need Base64 encoding:

Content-Type: image/png; name="logo.png"
Content-Transfer-Encoding: base64

iVBORw0KGgo...

4.3 API Data Transmission

Transmitting binary data in JSON:

{
  "filename": "document.pdf",
  "content": "JVBERi0xLjMKJcfsj6IKNSAwIG9iago8PC9..."
}

4.4 Local Storage

Storing binary data in localStorage or sessionStorage:

// 存储图片
localStorage.setItem('avatar', base64Image);

// 读取图片
const avatar = localStorage.getItem('avatar');
document.getElementById('avatar').src = avatar;

5. Security Considerations

• Base64 is NOT encryption! It is just encoding, anyone can decode it
• Do not use Base64 to encrypt sensitive data like passwords or keys
• Base64-encoded data can be easily identified
• If encryption is needed, use real encryption algorithms like AES or RSA

6. Advanced Techniques

6.1 Base64URL Encoding

Base64URL is a URL-safe variant of standard Base64:

function base64ToBase64Url(base64) {
  return base64
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

function base64UrlToBase64(base64Url) {
  let base64 = base64Url
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  // 添加填充
  while (base64.length % 4 !== 0) {
    base64 += '=';
  }
  return base64;
}

// 使用
const encoded = btoa('Hello, World!');
const urlSafe = base64ToBase64Url(encoded);
// SGVsbG8sIFdvcmxkIQ

6.2 Image to/from Base64

Handling image Base64 encoding in frontend:

// 图片转 Base64
function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Base64 转 Blob
function base64ToBlob(base64) {
  const [type, data] = base64.split(',');
  const mime = type.match(/:(.*?);/)[1];
  const byteString = atob(data);
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mime });
}

6.3 Processing Large Files

Memory considerations when processing large files:

async function processLargeFile(file, chunkSize = 1024 * 1024) {
  const chunks = [];
  let offset = 0;
  
  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const base64 = await new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = (e) => resolve(e.target.result);
      reader.readAsDataURL(chunk);
    });
    chunks.push(base64.split(',')[1]); // 去除 data URL 前缀
    offset += chunkSize;
  }
  
  return chunks;
}

6.4 Common Issues and Debugging

7. Base64 Variants

8. Using Tudousi Tools for Base64

Tudousi Tools provides powerful Base64 encoding/decoding features:

• Supports text and file Base64 encoding
• Supports Base64 decoding to text or file download
• Supports Base64URL variant
• Real-time preview of encoding results

Use Base64 Tool Now

9. Summary

Base64 is a practical encoding method, but it is NOT encryption. Understanding its principles and applications helps you use it correctly in appropriate scenarios. Tudousi Tools' Base64 encoding/decoding functionality can greatly simplify your workflow.