Encodage/Décodage Base64 en JavaScript : btoa(), atob() et Unicode

Encodage et décodage Base64 en JavaScript

JavaScript fournit plusieurs méthodes intégrées pour encoder et décoder des chaînes Base64. Que vous développiez une application navigateur ou un serveur Node.js, comprendre comment travailler avec Base64 est essentiel pour gérer les données binaires dans des formats textuels comme JSON, HTML et les URL.

Utiliser btoa() et atob() dans le navigateur

Les deux fonctions principales pour le Base64 en JavaScript côté navigateur sont btoa() et atob(). Ces noms de fonctions suivent une convention de nommage plus ancienne — btoa signifie « binary to ASCII » (binaire vers ASCII) et atob signifie « ASCII to binary » (ASCII vers binaire). Elles sont prises en charge par tous les navigateurs majeurs depuis des décennies.

Encoder avec btoa()

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

Décoder avec atob()

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

Les deux fonctions fonctionnent avec des chaînes qui ne contiennent que des caractères Latin-1 (chaque caractère représenté par un seul octet). C'est une limitation importante que nous aborderons ensuite.

Gérer les caractères Unicode et non-ASCII

Un piège courant : btoa() lève une erreur lorsqu'on lui donne des chaînes contenant des caractères hors du domaine Latin-1, comme des emojis, des caractères chinois ou des lettres accentuées.

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

Pour encoder des chaînes Unicode, vous devez d'abord convertir la chaîne en octets puis encoder ces octets. L'approche moderne utilise les API TextEncoder et 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 你好 🚀

Une technique plus ancienne utilise encodeURIComponent et decodeURIComponent, mais l'approche TextEncoder/TextDecoder est plus robuste et constitue la solution moderne recommandée.

Encoder des données binaires (ArrayBuffer)

Lorsque vous travaillez avec des fichiers, des images ou des données binaires brutes provenant d'API comme fetch ou FileReader, vous avez généralement un ArrayBuffer ou un Uint8Array. Voici comment le convertir en 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;
}

Convertir un fichier en Base64 dans le navigateur

Voici un exemple complet utilisant FileReader pour convertir un fichier sélectionné par l'utilisateur en une URL de données 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);
  }
});

Utiliser Base64 dans Node.js

Node.js fournit la classe Buffer pour les opérations Base64, qui est plus flexible que btoa/atob du navigateur. La classe Buffer gère automatiquement l'encodage et le décodage, y compris l'Unicode, et prend en charge plusieurs formats d'encodage.

Encodage et décodage de base

// 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!

Prise en charge de l'Unicode dans Node.js

Contrairement à btoa() dans le navigateur, Buffer de Node.js gère l'Unicode sans effort :

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 你好 🚀

Lire un fichier et l'encoder en 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}`;

Encodage Base64url dans Node.js

Node.js 15.7.0+ prend en charge l'encodage Base64url natif, qui remplace + par - et / par _ et omet le rembourrage :

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!

Considérations sur les performances

Pour les grandes quantités de données, les opérations Base64 répétées peuvent être lentes. Voici quelques conseils :

• Utilisez TextEncoder/TextDecoder plutôt que des conversions manuelles pour les chaînes Unicode
• Dans Node.js, Buffer.from() est hautement optimisé — préférez-le aux implémentations manuelles
• Évitez de convertir de gros fichiers en Base64 sauf si nécessaire (envisagez le streaming)
• Pour les grands ensembles de données, envisagez d'utiliser Blob et FileReader dans le navigateur pour éviter de bloquer le thread principal

Essayez l'encodage Base64 en ligne

Expérimentez l'encodage et le décodage directement dans votre navigateur avec notre encodeur et décodeur Base64 gratuit en ligne. Aucune compétence de codage requise — collez simplement du texte ou téléversez un fichier et obtenez instantanément le résultat Base64.