JavaScript'te Base64 Kodlama/Kod Çözme: btoa(), atob() ve Unicode

JavaScript'te Base64 Kodlama ve Kod Çözme

JavaScript, Base64 dizelerini kodlamak ve çözmek için birkaç yerleşik yöntem sunar. İster bir tarayıcı uygulaması ister bir Node.js sunucusu geliştiriyor olun, Base64 ile çalışmayı anlamak, JSON, HTML ve URL'ler gibi metin tabanlı formatlarda ikili verileri işlemek için gereklidir.

Tarayıcıda btoa() ve atob() Kullanımı

Tarayıcı JavaScript'inde Base64 için iki temel işlev btoa() ve atob()'dur. Bu işlev adları eski bir adlandırma kuralını takip eder — btoa "binary to ASCII" (ikiliden ASCII'ye) ve atob "ASCII to binary" (ASCII'den ikiliye) anlamına gelir. Onlarca yıldır tüm büyük tarayıcılarda desteklenmektedirler.

btoa() ile Kodlama

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

atob() ile Kod Çözme

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

Her iki işlev de yalnızca Latin-1 karakterleri (her karakter tek bir baytla temsil edilir) içeren dizelerle çalışır. Bu, daha sonra ele alacağımız önemli bir sınırlamadır.

Unicode ve ASCII Olmayan Karakterleri İşleme

Yaygın bir tuzak: btoa(), emoji, Çince karakterler veya aksanlı harfler gibi Latin-1 aralığının dışındaki karakterleri içeren dizeler verildiğinde hata verir.

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

Unicode dizeleri kodlamak için, önce dizeyi baytlara dönüştürmeniz ve ardından bu baytları kodlamanız gerekir. Modern yaklaşım TextEncoder ve TextDecoder API'lerini kullanır:

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

Daha eski bir teknik encodeURIComponent ve decodeURIComponent kullanır, ancak TextEncoder/TextDecoder yaklaşımı daha sağlamdır ve önerilen modern çözümdür.

İkili Verileri (ArrayBuffer) Kodlama

Dosyalar, resimler veya fetch ya da FileReader gibi API'lerden gelen ham ikili verilerle çalışırken, genellikle bir ArrayBuffer veya Uint8Array'e sahip olursunuz. Bunu Base64'e dönüştürmek için:

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;
}

Tarayıcıda Bir Dosyayı Base64'e Dönüştürme

Kullanıcı tarafından seçilen bir dosyayı Base64 veri URL'sine dönüştürmek için FileReader kullanan eksiksiz bir örnek:

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);
  }
});

Node.js'te Base64 Kullanımı

Node.js, Base64 işlemleri için Buffer sınıfını sağlar; bu, tarayıcının btoa/atob işlevlerinden daha esnektir. Buffer sınıfı, Unicode dahil olmak üzere kodlama ve kod çözmeyi otomatik olarak işler ve birden çok kodlama formatını destekler.

Temel Kodlama ve Kod Çözme

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

Node.js'te Unicode Desteği

Tarayıcıdaki btoa()'nın aksine, Node.js Buffer Unicode'u sorunsuzca işler:

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

Bir Dosyayı Okuyup Base64 Olarak Kodlama

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}`;

Node.js'te Base64url Kodlaması

Node.js 15.7.0 ve üzeri, + yerine - ve / yerine _ koyan ve dolguyu atlayan yerel Base64url kodlamasını destekler:

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!

Performans Değerlendirmeleri

Büyük veriler için, tekrarlanan Base64 işlemleri yavaş olabilir. İşte bazı ipuçları:

• Unicode dizeleri için manuel dönüşümler yerine TextEncoder/TextDecoder kullanın
• Node.js'te, Buffer.from() yüksek düzeyde optimize edilmiştir — manuel uygulamalar yerine bunu tercih edin
• Gerekli olmadıkça büyük dosyaları Base64'e dönüştürmekten kaçının (akış kullanmayı değerlendirin)
• Büyük veri kümeleri için, ana iş parçacığını engellememek için tarayıcıda Blob ve FileReader kullanmayı düşünün

Base64 Kodlamayı Çevrimiçi Deneyin

Kodlama ve kod çözmeyi tarayıcınızda denemek için ücretsiz çevrimiçi Base64 kodlayıcı ve kod çözücümüzü kullanın. Kodlama gerekmez — sadece metin yapıştırın veya bir dosya yükleyin ve Base64 sonucunu anında alın.