Encode/Decode Base64 di JavaScript: btoa(), atob(), dan Unicode

Encoding dan Decoding Base64 di JavaScript

JavaScript menyediakan beberapa cara bawaan untuk encode dan decode string Base64. Baik Anda membangun aplikasi browser maupun server Node.js, memahami cara bekerja dengan Base64 sangat penting untuk menangani data biner dalam format berbasis teks seperti JSON, HTML, dan URL.

Menggunakan btoa() dan atob() di Browser

Dua fungsi inti untuk Base64 di JavaScript browser adalah btoa() dan atob(). Nama fungsi ini mengikuti konvensi penamaan lama — btoa adalah singkatan dari "binary to ASCII" dan atob adalah singkatan dari "ASCII to binary." Keduanya telah didukung di semua browser utama selama beberapa dekade.

Encoding dengan btoa()

const originalString = 'Hello, world!';
const encoded = btoa(originalString);
console.log(encoded);
// Output: SGVsbG8sIHdvcmxkIQ==

Decoding dengan atob()

const base64String = 'SGVsbG8sIHdvcmxkIQ==';
const decoded = atob(base64String);
console.log(decoded);
// Output: Hello, world!

Kedua fungsi bekerja dengan string yang hanya berisi karakter Latin-1 (setiap karakter direpresentasikan oleh satu byte). Ini adalah batasan penting yang akan kita bahas selanjutnya.

Menangani Unicode dan Karakter Non-ASCII

Jebakan umum: btoa() melempar error ketika diberikan string yang berisi karakter di luar rentang Latin-1, seperti emoji, karakter Mandarin, atau huruf beraksen.

btoa('Hello 你好');
// Error: The string to be encoded contains characters outside of the Latin-1 range.

Untuk meng-encode string Unicode, Anda perlu mengonversi string ke byte terlebih dahulu lalu meng-encode byte tersebut. Pendekatan modern menggunakan API TextEncoder dan TextDecoder:

function unicodeToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binaryString = String.fromCharCode(...bytes);
  return btoa(binaryString);
}

function base64ToUnicode(base64) {
  const binaryString = atob(base64);
  const bytes = Uint8Array.from(binaryString, (c) => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}

// Usage
const encoded = unicodeToBase64('Hello 你好 🚀');
console.log(encoded);
// Output: SGVsbG8g5L2g5aW9IPCfj4A=

const decoded = base64ToUnicode(encoded);
console.log(decoded);
// Output: Hello 你好 🚀

Teknik lama menggunakan encodeURIComponent dan decodeURIComponent, tetapi pendekatan TextEncoder/TextDecoder lebih tangguh dan merupakan solusi modern yang direkomendasikan.

Encoding Data Biner (ArrayBuffer)

Saat bekerja dengan file, gambar, atau data biner mentah dari API seperti fetch atau FileReader, Anda biasanya memiliki ArrayBuffer atau Uint8Array. Berikut cara mengonversinya ke Base64:

function arrayBufferToBase64(buffer) {
  const bytes = new Uint8Array(buffer);
  let binaryString = '';
  for (let i = 0; i < bytes.length; i++) {
    binaryString += String.fromCharCode(bytes[i]);
  }
  return btoa(binaryString);
}

function base64ToArrayBuffer(base64) {
  const binaryString = atob(base64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

Mengonversi File ke Base64 di Browser

Berikut adalah contoh lengkap menggunakan FileReader untuk mengonversi file yang dipilih pengguna ke data URL Base64:

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage with a file input
document.querySelector('input[type="file"]').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  try {
    const dataUrl = await fileToBase64(file);
    console.log(dataUrl); // data:image/png;base64,iVBORw0KGgo...
  } catch (err) {
    console.error('Conversion failed:', err);
  }
});

Menggunakan Base64 di Node.js

Node.js menyediakan kelas Buffer untuk operasi Base64, yang lebih fleksibel daripada btoa/atob di browser. Kelas Buffer menangani encoding dan decoding secara otomatis, termasuk Unicode, dan mendukung berbagai format encoding.

Encoding dan Decoding Dasar

// Encode a string to Base64
const encoded = Buffer.from('Hello, world!').toString('base64');
console.log(encoded);
// Output: SGVsbG8sIHdvcmxkIQ==

// Decode a Base64 string back to text
const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
console.log(decoded);
// Output: Hello, world!

Dukungan Unicode di Node.js

Berbeda dengan btoa() di browser, Buffer Node.js menangani Unicode dengan mulus:

const encoded = Buffer.from('Hello 你好 🚀').toString('base64');
console.log(encoded);
// Output: SGVsbG8g5L2g5aW9IPCfj4A=

const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
console.log(decoded);
// Output: Hello 你好 🚀

Membaca File dan Meng-encode sebagai Base64

const fs = require('fs');

// Read a file and encode it to Base64
const buffer = fs.readFileSync('image.png');
const base64 = buffer.toString('base64');
const dataUrl = `data:image/png;base64,${base64}`;

Encoding Base64url di Node.js

Node.js 15.7.0+ mendukung encoding Base64url native, yang mengganti + dengan - dan / dengan _ serta menghilangkan padding:

const encoded = Buffer.from('Hello, world!').toString('base64url');
console.log(encoded);
// Output: SGVsbG8sIHdvcmxkIQ (no padding)

const decoded = Buffer.from(encoded, 'base64url').toString('utf-8');
console.log(decoded);
// Output: Hello, world!

Pertimbangan Kinerja

Untuk data besar, operasi Base64 berulang bisa lambat. Berikut beberapa tips:

• Gunakan TextEncoder/TextDecoder daripada konversi manual untuk string Unicode
• Di Node.js, Buffer.from() sangat dioptimalkan — gunakan daripada implementasi manual
• Hindari mengonversi file besar ke Base64 kecuali diperlukan (pertimbangkan streaming)
• Untuk dataset besar, pertimbangkan menggunakan Blob dan FileReader di browser untuk menghindari pemblokiran thread utama

Coba Encoding Base64 Online

Bereksperimenlah dengan encoding dan decoding langsung di browser Anda menggunakan encoder dan decoder Base64 online gratis kami. Tidak perlu coding — cukup tempel teks atau unggah file dan dapatkan hasil Base64 secara instan.