Base64エンコーディング解説：いつ、どのように使用するか

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ..." alt="Red pixel" />

// エンコーディング
const originalString = "Hello, World!";
const encoded = btoa(originalString);
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

// デコーディング
const decoded = atob(encoded);
console.log(decoded); // "Hello, World!"

// 安全なUnicodeエンコーディング
function base64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    function toSolidBytes(match, p1) {
      return String.fromCharCode('0x' + p1);
    }));
}

// 安全なUnicodeデコーディング
function base64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

// 使用方法
const unicode = "Hello 🌍!";
const encoded = base64EncodeUnicode(unicode);
const decoded = base64DecodeUnicode(encoded);
console.log(decoded); // "Hello 🌍!"

// ファイルをBase64に変換
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

// ファイル入力での使用方法
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (file) {
    try {
      const base64 = await fileToBase64(file);
      console.log(base64);
    } catch (error) {
      console.error('ファイル変換エラー:', error);
    }
  }
});