HTML Window btoa() मेथड: Base64 एन्कोडिंग

HTML Window btoa() मेथड एक बाइनरी स्ट्रिंग (Binary String) को Base64-एन्कोडेड ASCII स्ट्रिंग में बदलती है। यह डेटा ट्रांसमिशन, स्टोरेज, या URL-सुरक्षित एन्कोडिंग के लिए उपयोगी है। इसका पूरक मेथड atob() डीकोडिंग के लिए उपयोग होता है।

सिंटैक्स (Syntax)

window.btoa(string_to_encode)

पैरामीटर: एन्कोड की जाने वाली स्ट्रिंग (केवल Latin1/ISO-8859-1 रेंज में वर्ण)।

रिटर्न: Base64-एन्कोडेड स्ट्रिंग।

त्रुटि: यदि स्ट्रिंग में Latin1 रेंज से बाहर के वर्ण हैं (जैसे यूनिकोड अक्षर), तो DOMException फेंकता है।

उदाहरण (Example)

पूर्ण एन्कोड/डीकोड डेमो यूनिकोड हैंडलिंग के साथ।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 8px;
      width: 45%;
      display: inline-block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 0.5rem;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover {
      background: #b01030;
    }
    .btn.decode {
      background: #2274A5;
    }
    .btn.decode:hover {
      background: #1a5d85;
    }
    textarea {
      width: 90%;
      max-width: 500px;
      height: 100px;
      padding: 12px;
      border: 2px solid #fff;
      background: rgba(255,255,255,0.9);
      border-radius: 10px;
      margin: 1rem auto;
      display: block;
      font-family: monospace;
      font-size: 1rem;
      outline: none;
      resize: vertical;
    }
    textarea:focus {
      border-color: #db133a;
    }
    .show {
      font-size: 1.1rem;
      color: #fff;
      margin: 1rem auto;
      background: rgba(0,0,0,0.3);
      padding: 1rem;
      border-radius: 10px;
      display: inline-block;
      min-width: 90%;
      max-width: 500px;
      text-align: left;
      word-break: break-all;
      font-family: monospace;
      min-height: 60px;
    }
    .error { color: #f87171; }
    .success { color: #4ade80; }
  </style>
</head>
<body>
  <h1>HTML Window btoa() / atob() मेथड डेमो</h1>
  
  <textarea id="inputText" placeholder="अपना संदेश यहां दर्ज करें (यूनिकोड समर्थन के लिए UTF-8 एन्कोडिंग उपयोग की जाएगी)...">नमस्ते दुनिया! Hello World! 🌍</textarea>
  
  <button class="btn" onclick="encodeMessage()">संदेश एन्कोड करें (btoa)</button>
  <button class="btn decode" onclick="decodeMessage()">संदेश डीकोड करें (atob)</button>
  
  <div class="show" id="output"></div>
  
  <details style="margin: 2rem auto; max-width: 500px; text-align: left; color: #fff;">
    <summary>यूनिकोड समस्या और समाधान</summary>
    <p>btoa() केवल Latin1 वर्ण स्वीकार करता है। यूनिकोड (हिंदी, इमोजी, आदि) के लिए, पहले UTF-8 में एन्कोड करें:</p>
    <pre>function utf8ToB64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

function b64ToUtf8(str) {
  return decodeURIComponent(escape(atob(str)));
}

</details> <script> const inputText = document.getElementById('inputText'); const output = document.getElementById('output'); // यूनिकोड-सुरक्षित एन्कोडिंग function utf8ToB64(str) { try { return btoa(unescape(encodeURIComponent(str))); } catch (e) { throw new Error('एन्कोडिंग विफल: ' + e.message); } } // यूनिकोड-सुरक्षित डीकोडिंग function b64ToUtf8(str) { try { return decodeURIComponent(escape(atob(str))); } catch (e) { throw new Error('डीकोडिंग विफल: अमान्य Base64 या दूषित डेटा'); } } function encodeMessage() { const text = inputText.value; if (!text.trim()) { output.innerHTML = 'कृपया कुछ टेक्स्ट दर्ज करें।'; return; } try { const encoded = utf8ToB64(text); output.innerHTML = ` ✓ एन्कोडेड (Base64): ${encoded} लंबाई: ${encoded.length} वर्ण `; } catch (e) { output.innerHTML = `✗ त्रुटि: ${e.message}`; } } function decodeMessage() { const text = inputText.value; if (!text.trim()) { output.innerHTML = 'कृपया Base64 स्ट्रिंग दर्ज करें।'; return; } try { const decoded = b64ToUtf8(text); output.innerHTML = ` ✓ डीकोडेड (मूल): ${decoded} `; } catch (e) { output.innerHTML = `✗ त्रुटि: ${e.message}`; } } </script> </body> </html>

आउटपुट (Output)

मूल टेक्स्ट के साथ टेक्स्टएरिया:

HTML Window btoa() मेथड: Base64 एन्कोडिंग

"संदेश एन्कोड करें" पर क्लिक करने के बाद:

HTML Window btoa() मेथड: Base64 एन्कोडिंग

"संदेश डीकोड करें" पर क्लिक करने के बाद (एन्कोडेड स्ट्रिंग के साथ):

HTML Window btoa() मेथड: Base64 एन्कोडिंग

तकनीकी विवरण

Base64 क्या है?

Base64 बाइनरी डेटा को ASCII स्ट्रिंग फॉर्मेट में एन्कोड करने की एक योजना है। यह 64 वर्णों (A-Z, a-z, 0-9, +, /) का उपयोग करता है, पैडिंग के लिए = के साथ।

btoa() सीमाएं

केवल Latin1 (ISO-8859-1) वर्ण स्वीकार करता है (कोड पॉइंट 0-255)।
यूनिकोड वर्ण (हिंदी, चीनी, इमोजी, आदि) सीधे उपयोग करने पर त्रुटि फेंकते हैं।
समाधान: encodeURIComponent() → unescape() → btoa() (ऊपर दिखाया गया)।

उपयोग के मामले

डेटा URL: छवियों/फाइलों को Base64 में एम्बेड करना (data:image/png;base64,...)।
टोकन एन्कोडिंग: JWT, सत्र टोकन, API कुंजियाँ।
URL-सुरक्षित डेटा: URL पैरामीटर्स में बाइनरी डेटा पास करना (Base64URL वेरिएंट के साथ)।
लोकल स्टोरेज: बाइनरी डेटा (छवियां, फाइलें) स्टोर करना।
बेसिक ऑथ: btoa('username:password') Authorization हेडर के लिए।

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़र (Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, IE 10+, Opera 12+)。

नोट: btoa/atob ग्लोबल स्कोप में भी उपलब्ध हैं

window.btoa() और btoa() समान हैं (ग्लोबल ऑब्जेक्ट पर)।