JavaScript'te Base64 — btoa() & Buffer
Ücretsiz Base64 Kodlayıcı Online aracını doğrudan tarayıcınızda kullanın — kurulum gerektirmez.
Base64 Kodlayıcı Online Online Dene →Bir CSS data URI'ye görsel gömdüğünüzde, HTTP Authorization başlığında kimlik bilgisi ilettiğinizde ya da bir ortam değişkeninde ikili sertifika sakladığınızda, JavaScript verilerini hem tarayıcıda hem de Node.js'te güvenilir biçimde Base64 ile kodlamanız gerekir. JavaScript iki ayrı yerleşik API sunar:btoa() tarayıcı ortamları için (Node.js 16+ sürümünde de mevcuttur) ve Buffer.from()Node.js için — her birinin Unicode, ikili veri ve URL güvenliği konusunda farklı kısıtlamaları vardır. Kod yazmadan hızlı bir kodlama yapmak için ToolDeck's Base64 Encoder bunu tarayıcıda anında gerçekleştirir. Bu kılavuz her iki ortam için üretime hazır örnekleri kapsar: Unicode işleme, URL güvenli varyantlar, dosya ve API yanıtı kodlama, CLI kullanımı ve gerçek kod tabanlarında tutarlı biçimde hatalara yol açan dört yaygın hata.
- ✓btoa() tarayıcıya özgüdür ve Node.js 16+ sürümünde global olarak mevcuttur, ancak yalnızca Latin-1 (kod noktaları 0–255) kabul eder — Unicode girdi DOMException fırlatır
- ✓Buffer.from(text, "utf8").toString("base64") Node.js karşılığıdır ve Unicode'u ek adımlara gerek kalmadan yerel olarak işler
- ✓URL güvenli Base64, + karakterini - ile, / karakterini _ ile değiştirir ve = doldurmayı kaldırır — Node.js 18+ sürümünde Buffer.from().toString("base64url") tek satırla çözüm sunar
- ✓İkili veriler (ArrayBuffer, Uint8Array, dosyalar) için Node.js'te Buffer kullanın ya da tarayıcıda arrayBuffer() + Uint8Array yaklaşımını tercih edin — asla response.text() kullanmayın
- ✓Uint8Array.prototype.toBase64() (TC39 Stage 3) Node.js 22+ ve Chrome 130+ sürümlerinde zaten kullanılabilir durumdadır ve her iki ortamı birleştirecektir
Base64 Kodlama Nedir?
Base64, rastgele ikili verileri 64 yazdırılabilir ASCII karakterinden oluşan bir dizgeye dönüştürür: A–Z, a–z, 0–9, + ve /. Her 3 bayt girdi tam olarak 4 Base64 karakteriyle eşleşir; girdi uzunluğu 3'ün katı değilse bir ya da iki = dolgu karakteri eklenir. Kodlanmış çıktı her zaman orijinalden yaklaşık %33 daha büyüktür.
Base64 şifreleme değildir— gizlilik sağlamaz. Kodlanmış dizgeye sahip olan herkes tek bir fonksiyon çağrısıyla çözebilir. Amacı aktarım güvenliğidir: pek çok protokol ve depolama biçimi 7 bitlik ASCII metin için tasarlanmıştır ve rastgele ikili baytları işleyemez. Base64 bu boşluğu kapatır. Yaygın JavaScript kullanım senaryoları arasında varlıkları satır içi olarak yerleştirmek için data URI'ler, HTTP Basic Auth başlıkları, JWT token segmentleri, e-posta MIME ekleri ve JSON API'lerinde ikili blob'ların saklanması sayılabilir.
deploy-bot:sk-prod-a7f2c91e4b3d8
ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg=
btoa() — Tarayıcıya Özgü Kodlama Fonksiyonu
btoa()(binary-to-ASCII), IE10'dan bu yana tarayıcılarda mevcuttur ve WinterCG uyumluluk girişiminin bir parçası olarak Node.js 16.0'da global fonksiyon haline gelmiştir. Deno, Bun ve Cloudflare Workers'ta da yerel olarak çalışır. İçe aktarma gerekmez.
Fonksiyon tek bir dize argümanı alır ve Base64 kodlanmış biçimini döndürür. Simetrik karşılığı atob() (ASCII-to-binary) geri çözer. Her ikisi de eş zamanlıdır ve girdi boyutuna göre sabit bellekte çalışır.
Minimal çalışan örnek
// Encoding an API credential pair for an HTTP Basic Auth header
const serviceId = 'deploy-bot'
const apiKey = 'sk-prod-a7f2c91e4b3d8'
const credential = btoa(`${serviceId}:${apiKey}`)
// → 'ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg='
const headers = new Headers({
Authorization: `Basic ${credential}`,
'Content-Type': 'application/json',
})
console.log(headers.get('Authorization'))
// Basic ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg=atob() ile çözme
// Round-trip: encode, transmit, decode const payload = 'service:payments region:eu-west-1 env:production' const encoded = btoa(payload) const decoded = atob(encoded) console.log(encoded) // c2VydmljZTpwYXltZW50cyByZWdpb246ZXUtd2VzdC0xIGVudjpwcm9kdWN0aW9u console.log(decoded === payload) // true
btoa() ve atob(), WinterCG Minimum Common API'nin parçasıdır — tarayıcı dışı çalışma zamanlarında Fetch, URL ve crypto'yu yöneten aynı spesifikasyon. Node.js 16+, Bun, Deno ve Cloudflare Workers'ta aynı şekilde davranırlar.Unicode ve ASCII Dışı Karakterlerin İşlenmesi
btoa()'nın en yaygın tuzağı, katı Latin-1 sınırıdır. U+00FF'in üzerinde bir kod noktasına sahip herhangi bir karakter anında istisna fırlatır:
btoa('Müller & Søren') // ❌ Uncaught DOMException: String contains an invalid character
btoa('résumé') // ❌ 'é' is U+00E9 = 233 — within Latin-1, this one actually works
btoa('田中太郎') // ❌ Throws — all CJK characters are above U+00FFDoğru yaklaşım, önce dizeyi UTF-8 baytlarına kodlamak, ardından bu baytları Base64 ile kodlamaktır. JavaScript tam bu amaç için TextEncoder'ı sunar:
TextEncoder yaklaşımı — herhangi bir Unicode girdi için güvenli
// Utility functions for Unicode-safe Base64
function toBase64(text: string): string {
const bytes = new TextEncoder().encode(text)
const chars = Array.from(bytes, byte => String.fromCharCode(byte))
return btoa(chars.join(''))
}
function fromBase64(encoded: string): string {
const binary = atob(encoded)
const bytes = Uint8Array.from(binary, ch => ch.charCodeAt(0))
return new TextDecoder().decode(bytes)
}
// Works with any language or script
const orderNote = 'Onaylandı: Mehmet Yılmaz — İstanbul deposu, miktar: 250'
const encoded = toBase64(orderNote)
const decoded = fromBase64(encoded)
console.log(encoded)
// T25heWFuZMSxOiBNZWhtZXQgWcSxbG1heiDigJQgxLBzdGFuYnVsIGRlcG9zdSwgbWlrdGFyOiAyNTA=
console.log(decoded === orderNote) // trueBuffer.from(text, 'utf8').toString('base64')kullanın. Unicode'u yerel olarak işler ve büyük diziler için daha hızlıdır.Node.js'te Buffer.from() — Örneklerle Kapsamlı Kılavuz
Node.js'te Buffer, kodlama dönüşümleri de dahil olmak üzere tüm ikili veri işlemleri için deyimsel API'dir. TextEncoder'dan yıllar önce ortaya çıkmıştır ve sunucu tarafı kodlarda tercih edilen seçim olmaya devam etmektedir. btoa()'ya göre temel avantajları: yerel UTF-8 desteği, ikili veri işleme ve Node.js 18'den itibaren kullanılabilen 'base64url' kodlama kısayolu.
Temel metin kodlama ve çözme
// Encoding a server configuration object for storage in an env variable
const dbConfig = JSON.stringify({
host: 'db-primary.internal',
port: 5432,
database: 'analytics_prod',
maxConnections: 100,
ssl: { rejectUnauthorized: true },
})
const encoded = Buffer.from(dbConfig, 'utf8').toString('base64')
console.log(encoded)
// eyJob3N0IjoiZGItcHJpbWFyeS5pbnRlcm5hbCIsInBvcnQiOjU0MzIsImRhdGFiYXNlIjoiYW5h...
// Decoding back
const decoded = Buffer.from(encoded, 'base64').toString('utf8')
const config = JSON.parse(decoded)
console.log(config.host) // db-primary.internal
console.log(config.maxConnections) // 100Diskten ikili dosyaları kodlama
import { readFileSync, writeFileSync } from 'node:fs'
import { join } from 'node:path'
// Read a TLS certificate and encode it for embedding in a config file
const certPem = readFileSync(join(process.cwd(), 'ssl', 'server.crt'))
const certBase64 = certPem.toString('base64')
// Store as a single-line string — suitable for env vars or JSON configs
writeFileSync('./dist/cert.b64', certBase64, 'utf8')
console.log(`Certificate encoded: ${certBase64.length} characters`)
// Certificate encoded: 2856 characters
// Restore the binary cert from the encoded value
const restored = Buffer.from(certBase64, 'base64')
console.log(restored.equals(certPem)) // trueHata işlemeli asenkron dosya kodlama
import { readFile } from 'node:fs/promises'
async function encodeFileToBase64(filePath: string): Promise<string> {
try {
const buffer = await readFile(filePath)
return buffer.toString('base64')
} catch (err) {
const code = (err as NodeJS.ErrnoException).code
if (code === 'ENOENT') throw new Error(`File not found: ${filePath}`)
if (code === 'EACCES') throw new Error(`Permission denied: ${filePath}`)
throw err
}
}
// Encode a PDF for an email attachment payload
const reportBase64 = await encodeFileToBase64('./reports/q1-financials.pdf')
const emailPayload = {
to: 'finance-team@company.internal',
subject: 'Q1 Financial Report',
attachments: [{
filename: 'q1-financials.pdf',
content: reportBase64,
encoding: 'base64',
contentType: 'application/pdf',
}],
}
console.log(`Attachment: ${reportBase64.length} chars`)JavaScript Base64 Fonksiyonları — Parametre Referansı
Python'ın base64modülünün aksine, JavaScript'in tek bir birleşik Base64 fonksiyonu yoktur. API, hedef ortama göre farklılık gösterir. Tüm yerel yaklaşımlar için tam referans:
| Fonksiyon | Girdi türü | Unicode | URL güvenli | Kullanılabilir ortamlar |
|---|---|---|---|---|
| btoa(string) | string (Latin-1) | ❌ U+00FF üzerinde fırlatır | ❌ manuel değiştirme | Browser, Node 16+, Bun, Deno |
| atob(string) | Base64 string | ❌ ikili dize döndürür | ❌ manuel değiştirme | Browser, Node 16+, Bun, Deno |
| Buffer.from(src, enc) .toString(enc) | string | Buffer | Uint8Array | ✅ utf8 kodlama | ✅ Node 18+'de base64url | Node.js, Bun |
| TextEncoder().encode(str) + btoa() | string (herhangi Unicode) | ✅ UTF-8 baytları ile | ❌ manuel değiştirme | Browser, Node 16+, Deno |
| Uint8Array.toBase64() (TC39) | Uint8Array | ✅ ikili | ✅ omitPadding + alphabet | Chrome 130+, Node 22+ |
Buffer.from(src, enc).toString(enc) imzası Base64 ile ilgili birkaç kodlama değeri kabul eder:
URL Güvenli Base64 — JWT, URL ve Dosya Adları için Kodlama
Standart Base64, URL'lerde ayrılmış olan + ve / karakterlerini kullanır — + sorgu dizelerinde boşluk olarak çözümlenir ve /yol ayırıcıdır. JWT'ler, URL parametreleri, dosya adları ve çerez değerleri URL güvenli varyantı gerektirir: + → -, / → _, sondaki = kaldırılır.
Tarayıcı — manuel karakter değiştirme
function toBase64Url(text: string): string {
// For ASCII-safe input (e.g., JSON with only ASCII chars)
return btoa(text)
.replace(/+/g, '-')
.replace(///g, '_')
.replace(/=/g, '')
}
function fromBase64Url(encoded: string): string {
// Restore standard Base64 characters and padding before decoding
const base64 = encoded.replace(/-/g, '+').replace(/_/g, '/')
const padded = base64 + '==='.slice(0, (4 - base64.length % 4) % 4)
return atob(padded)
}
// JWT header — must be URL-safe Base64
const header = JSON.stringify({ alg: 'HS256', typ: 'JWT' })
const encoded = toBase64Url(header)
console.log(encoded) // eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
const decoded = fromBase64Url(encoded)
console.log(decoded) // {"alg":"HS256","typ":"JWT"}Node.js 18+ — yerel 'base64url' kodlama
// Node.js 18 added 'base64url' as a first-class Buffer encoding
const sessionPayload = JSON.stringify({
userId: 'usr_9f2a1c3e8b4d',
role: 'editor',
workspaceId:'ws_3a7f91c2',
exp: Math.floor(Date.now() / 1000) + 3600,
})
const encoded = Buffer.from(sessionPayload, 'utf8').toString('base64url')
// No + or / or = characters in the output
// eyJ1c2VySWQiOiJ1c3JfOWYyYTFjM2U4YjRkIiwicm9sZSI6ImVkaXRvciIsIndvcmtzcGFjZUlkIjoid3NfM2E3ZjkxYzIiLCJleHAiOjE3MTcyMDM2MDB9
const decoded = Buffer.from(encoded, 'base64url').toString('utf8')
console.log(JSON.parse(decoded).role) // editorJavaScript'te Dosyaları ve API Yanıtlarını Kodlama
Üretim kodunda Base64 kodlama en çok iletilen dosyalara ve ikili içerik döndüren harici API'lerden gelen yanıtlara uygulanır. Desenler tarayıcı ile Node.js arasında farklıdır ve ikili veriler özel dikkat gerektirir.
Tarayıcı — input öğesinden dosya kodlama
// Modern approach: File.arrayBuffer() (Chrome 76+, Firefox 69+, Safari 14+)
async function encodeFile(file: File): Promise<string> {
const buffer = await file.arrayBuffer()
const bytes = new Uint8Array(buffer)
const chars = Array.from(bytes, b => String.fromCharCode(b))
return btoa(chars.join(''))
}
const uploadInput = document.getElementById('avatar') as HTMLInputElement
uploadInput.addEventListener('change', async (e) => {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file) return
try {
const encoded = await encodeFile(file)
const dataUri = `data:${file.type};base64,${encoded}`
// Preview the image inline
const img = document.getElementById('preview') as HTMLImageElement
img.src = dataUri
img.hidden = false
console.log(`Encoded ${file.name} (${file.size} bytes) → ${encoded.length} Base64 chars`)
} catch (err) {
console.error('Encoding failed:', err)
}
})API'den Base64 kodlu ikili veri çekme
// GitHub Contents API returns file content as Base64 with embedded newlines
async function fetchRepoFile(
owner: string,
repo: string,
path: string,
token: string,
): Promise<string> {
const res = await fetch(
`https://api.github.com/repos/${owner}/${repo}/contents/${path}`,
{
headers: {
Authorization: `Bearer ${token}`,
Accept: 'application/vnd.github.v3+json',
},
}
)
if (!res.ok) throw new Error(`GitHub API ${res.status}: ${res.statusText}`)
const data = await res.json() as { content: string; encoding: string; size: number }
if (data.encoding !== 'base64') {
throw new Error(`Unexpected encoding from GitHub: ${data.encoding}`)
}
// GitHub wraps output at 60 chars — strip newlines before decoding
const clean = data.content.replace(/\n/g, '')
return atob(clean)
}
const openApiSpec = await fetchRepoFile(
'acme-corp', 'platform-api', 'openapi.json', process.env.GITHUB_TOKEN!
)
const spec = JSON.parse(openApiSpec)
console.log(`API version: ${spec.info.version}`)API hata ayıklama sırasında script yazmadan kodlanmış yanıtı incelemek istediğinizde, Base64 değerini doğrudan Base64 Encoder'a yapıştırın — çözme işlemini de destekler ve çıktıyı anında gösterir. GitHub API yanıtlarını, JWT yüklerini ve webhook imzalarını incelemek için kullanışlıdır.
Node.js ve Kabukta Komut Satırından Base64 Kodlama
CI/CD scriptleri, Makefile hedefleri veya tek seferlik hata ayıklama için nadiren tam bir script gerekir. Hem sistem araçları hem de Node.js tek satırlıkları platformlar arası çoğu durumu karşılar.
# ── macOS / Linux system base64 ───────────────────────────────────────
# Standard encoding
echo -n "deploy-bot:sk-prod-a7f2c91e4b3d8" | base64
# ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg=
# URL-safe variant (replace chars and strip padding)
echo -n "deploy-bot:sk-prod-a7f2c91e4b3d8" | base64 | tr '+/' '-_' | tr -d '='
# Encode a file inline (macOS: -b 0 removes line wrapping; Linux: --wrap=0)
base64 -b 0 ./config/production.json
# or on Linux:
base64 --wrap=0 ./config/production.json
# Decode
echo "ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg=" | base64 --decode
# ── Node.js one-liner — works on Windows too ───────────────────────────
node -e "process.stdout.write(Buffer.from(process.argv[1]).toString('base64'))" "my:secret"
# bXk6c2VjcmV0
# URL-safe from Node.js 18+
node -e "process.stdout.write(Buffer.from(process.argv[1]).toString('base64url'))" "my:secret"
# bXk6c2VjcmV0 (same here since there are no special chars)
# Decode in Node.js
node -e "console.log(Buffer.from(process.argv[1], 'base64').toString())" "ZGVwbG95LWJvdA=="base64 varsayılan olarak çıktıyı 76 karakterde sarmalar. Bu, aşağı akış ayrıştırmayı bozar. Ortam değişkenine veya yapılandırma alanına yazarken olduğu gibi tek satırlık sonuca ihtiyaç duyduğunuzda her zaman -b 0 (macOS) veya --wrap=0 (Linux) ekleyin.Yüksek Performanslı Alternatif: js-base64
Yerleşik API'ler çoğu kullanım durumu için yeterlidir. Bir kütüphaneye başvurmanın temel nedeni ortamlar arası tutarlılıktır: hem tarayıcıda hem de Node.js'te çalışan bir paket yayımlıyorsanız, Buffer kullanmak ortam tespiti veya paketleyici yapılandırması gerektirir; btoa()ise Unicode geçici çözümü gerektirir. js-base64 (haftalık 100M+ npm indirmesi) her ikisini şeffaf biçimde işler.
npm install js-base64 # or pnpm add js-base64
import { toBase64, fromBase64, toBase64Url, fromBase64Url, isValid } from 'js-base64'
// Standard encoding — Unicode-safe, works in browser and Node.js
const telemetryEvent = JSON.stringify({
eventId: 'evt_7c3a9f1b2d',
type: 'checkout_completed',
currency: 'EUR',
amount: 14900,
userId: 'usr_4e2b8d6a5c',
timestamp: 1717200000,
})
const encoded = toBase64(telemetryEvent)
const urlEncoded = toBase64Url(telemetryEvent) // No +, /, or = characters
const decoded = fromBase64(encoded)
console.log(JSON.parse(decoded).type) // checkout_completed
// Binary data — pass a Uint8Array as second argument
const pngMagicBytes = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
const binaryEncoded = toBase64(pngMagicBytes, true) // true = binary mode
// Validation before decoding
const suspicious = 'not!valid@base64#'
console.log(isValid(suspicious)) // falseArka planda js-base64, mevcut olduğunda yerel Buffer'ı kullanır ve tarayıcıda saf JS uygulamasına geri döner. Büyük Unicode dizeleri için TextEncoder+btoa yaklaşımından 2–3× daha hızlıdır ve simetrik API (toBase64 / fromBase64), btoa ile atob'un hangi yönde çalıştığını hatırlama zihinsel yükünü ortadan kaldırır.
Node.js Akışlarıyla Büyük İkili Dosyaları Kodlama
~50 MB'tan büyük dosyaları kodlamanız gerektiğinde, readFileSync()ile tüm dosyayı belleğe yüklemek sorun haline gelir. Node.js akışları verileri parçalar halinde işlemenize izin verir — ancak Base64 kodlamanın bir kısıtlaması vardır: parça sınırlarında yanlış dolguyu önlemek için kodlayıcıya 3'ün katı bayt vermelisiniz.
import { createReadStream, createWriteStream } from 'node:fs'
import { pipeline } from 'node:stream/promises'
// Stream a large binary file to a Base64-encoded output file
async function streamEncodeToBase64(
inputPath: string,
outputPath: string,
): Promise<void> {
const readStream = createReadStream(inputPath, { highWaterMark: 3 * 1024 * 256 }) // 768 KB chunks (multiple of 3)
const writeStream = createWriteStream(outputPath, { encoding: 'utf8' })
let buffer = Buffer.alloc(0)
await pipeline(
readStream,
async function* (source) {
for await (const chunk of source) {
buffer = Buffer.concat([buffer, chunk as Buffer])
// Encode in complete 3-byte groups to avoid mid-stream padding
const remainder = buffer.length % 3
const safe = buffer.subarray(0, buffer.length - remainder)
buffer = buffer.subarray(buffer.length - remainder)
if (safe.length > 0) yield safe.toString('base64')
}
// Flush remaining bytes (may add 1 or 2 '=' padding chars)
if (buffer.length > 0) yield buffer.toString('base64')
},
writeStream,
)
}
// Usage: encode a 200 MB video attachment
await streamEncodeToBase64(
'./uploads/product-demo.mp4',
'./dist/product-demo.b64',
)
console.log('Stream encoding complete')= dolgusu oluşmaması için parça boyutu 3 baytın katı olmalıdır. Örnekte 3 * 1024 * 256 = 786.432 bayt (768 KB) kullanılmaktadır — highWaterMark değerini bellek bütçenize göre ayarlayın. 50 MB altındaki dosyalar için readFile() + Buffer.toString('base64') daha basit ve yeterince hızlıdır.Yaygın Hatalar
Base64 kodlama içeren pek çok JavaScript kod tabanını inceledim ve bu dört hata sürekli karşıma çıkıyor — genellikle ASCII dışı bir karakter veya ikili dosya üretim ortamındaki kodlama yoluna ulaşana kadar fark edilmeden kalıyor.
Hata 1 — Unicode'u doğrudan btoa()'ya geçirme
Sorun: btoa() yalnızca 0–255 aralığındaki kod noktalarına sahip karakterleri kabul eder. ñ, emoji veya CJK ideografları gibi karakterler anında DOMException fırlatır. Çözüm: önce TextEncoder ile kodlayın ya da Node.js'te Buffer.from(text, 'utf8').toString('base64') kullanın.
// ❌ DOMException: The string to be encoded contains // characters outside of the Latin1 range const username = 'Алексей Иванов' const encoded = btoa(username) // throws
// ✅ Encode as UTF-8 bytes first
function safeEncode(text: string): string {
const bytes = new TextEncoder().encode(text)
const chars = Array.from(bytes, b => String.fromCharCode(b))
return btoa(chars.join(''))
}
const encoded = safeEncode('Алексей Иванов')
// 0JDQu9C10LrRgdC10Lkg0JjQstCw0L3QvtCyHata 2 — atob() çağrısından önce dolguyu geri yüklemeyi unutma
Sorun: URL güvenli Base64, = dolgusunu kaldırır. Dolgusuz dizeyi doğrudan atob()'ya geçirmek, dize uzunluğuna bağlı olarak yanlış çıktı üretir veya istisna fırlatır. Çözüm: atob()'yu çağırmadan önce + ve /'yi geri yükleyin ve doğru miktarda dolguyu yeniden ekleyin.
// ❌ atob() may return wrong data or throw // on URL-safe Base64 without padding const jwtSegment = 'eyJ1c2VySWQiOiJ1c3JfOWYyYTFjM2UifQ' const decoded = atob(jwtSegment) // Unreliable
// ✅ Restore characters and padding first
function decodeBase64Url(input: string): string {
const b64 = input.replace(/-/g, '+').replace(/_/g, '/')
const pad = b64 + '==='.slice(0, (4 - b64.length % 4) % 4)
return atob(pad)
}
const decoded = decodeBase64Url('eyJ1c2VySWQiOiJ1c3JfOWYyYTFjM2UifQ')
// {"userId":"usr_9f2a1c3e"}Hata 3 — Ham arabellekler yerine kodlanmış parçaları birleştirme
Sorun: btoa() veya .toString('base64')'ya yapılan her çağrı kendi dolgusunu ekler. İki dolgulu Base64 dizesini birleştirmek geçersiz çıktı üretir; çünkü dolgu yalnızca en sona ait olmalıdır. Çözüm: kodlamadan önce ham verileri birleştirin.
// ❌ Both parts are padded independently —
// the combined string is not valid Base64
const part1 = Buffer.from('webhook-secret').toString('base64')
// d2ViaG9vay1zZWNyZXQ= ← has padding
const part2 = Buffer.from('-v2').toString('base64')
// LXYy ← correct in isolation
const combined = part1 + part2 // ❌ Invalid — padding in the middle// ✅ Concatenate raw Buffers before encoding
const combined = Buffer.concat([
Buffer.from('webhook-secret'),
Buffer.from('-v2'),
]).toString('base64')
// d2ViaG9vay1zZWNyZXQtdjI= — single valid Base64 stringHata 4 — Kodlamadan önce ikili API verilerini response.text() ile okuma
Sorun: response.text() ham baytları UTF-8 olarak yorumlar ve tanınmayan bayt dizilerini yedek karakter U+FFFD ile değiştirir. Görsel, PDF, ses gibi her türlü ikili içerik, btoa()'ya ulaşmadan sessizce bozulur. Çözüm: ham baytları almak için response.arrayBuffer()kullanın.
// ❌ response.text() corrupts binary data
const res = await fetch('/api/exports/invoice.pdf')
const text = await res.text() // ❌ PDF bytes mangled as UTF-8
const encoded = btoa(text) // ❌ Corrupted Base64// ✅ arrayBuffer() preserves raw bytes
const res = await fetch('/api/exports/invoice.pdf')
const buffer = await res.arrayBuffer()
const bytes = new Uint8Array(buffer)
const chars = Array.from(bytes, b => String.fromCharCode(b))
const encoded = btoa(chars.join('')) // ✅ Valid Base64JavaScript Base64 Yöntemleri — Hızlı Karşılaştırma
| Yöntem | Unicode | İkili veri | URL güvenli | Ortamlar | Kurulum gerektirir |
|---|---|---|---|---|---|
| btoa() / atob() | ❌ Latin-1 | ❌ geçici çözüm gerekir | ❌ manuel değiştirme | Browser, Node 16+, Bun, Deno | Hayır |
| TextEncoder + btoa() | ✅ UTF-8 | ✅ Uint8Array ile | ❌ manuel değiştirme | Browser, Node 16+, Deno | Hayır |
| Buffer.from().toString() | ✅ utf8 | ✅ yerel | ✅ base64url (Node 18+) | Node.js, Bun | Hayır |
| Uint8Array.toBase64() (TC39) | ✅ ikili | ✅ yerel | ✅ alphabet seçeneği | Chrome 130+, Node 22+ | Hayır |
| js-base64 | ✅ her zaman | ✅ Uint8Array | ✅ yerleşik | Evrensel | npm install |
btoa()'yı yalnızca girdi kesinlikle ASCII ise tercih edin — onaltılık özetler, sayısal kimlikler veya önceden doğrulanmış Latin-1 dizeleri. Tarayıcıda kullanıcı tarafından sağlanan metin için TextEncoder + btoa() kullanın. Tüm Node.js sunucu tarafı kodu için Buffer doğru varsayılandır. Paketleyici yapılandırması olmadan her iki ortamda da çalışması gereken kütüphaneler için js-base64 tüm uç durumları ortadan kaldırır.
Sıkça Sorulan Sorular
İlgili Araçlar
Kod yazmadan tek tıkla kodlamak veya çözmek için dizinizi ya da ikili verilerinizi doğrudan Base64 Encoder'a yapıştırın — tarayıcıda standart ve URL güvenli modları anında işler.
Alex is a front-end and Node.js developer with extensive experience building web applications and developer tooling. He is passionate about web standards, browser APIs, and the JavaScript ecosystem. In his spare time he contributes to open-source projects and writes about modern JavaScript patterns, performance optimisation, and everything related to the web platform.
Sophie is a full-stack developer focused on TypeScript across the entire stack — from React frontends to Express and Fastify backends. She has a particular interest in type-safe API design, runtime validation, and the patterns that make large JavaScript codebases stay manageable. She writes about TypeScript idioms, Node.js internals, and the ever-evolving JavaScript module ecosystem.