HTML Window atob() मेथड: Base64 डीकोडिंग

HTML Window atob() मेथड एक Base64-एन्कोडेड ASCII स्ट्रिंग को डीकोड करके मूल बाइनरी स्ट्रिंग (या UTF-8 हैंडलिंग के साथ यूनिकोड स्ट्रिंग) में बदलती है। यह btoa() का पूरक मेथड है।

सिंटैक्स (Syntax)

window.atob(base64_string)

पैरामीटर: डीकोड की जाने वाली Base64-एन्कोडेड स्ट्रिंग।

रिटर्न: डीकोडेड बाइनरी स्ट्रिंग (Latin1)।

त्रुटि: यदि इनपुट वैध Base64 नहीं है (गलत पैडिंग, अमान्य वर्ण), तो DOMException फेंकता है।

उदाहरण (Example)

यह उदाहरण atob() का उपयोग करके Base64 स्ट्रिंग्स को डीकोड करता है, यूनिकोड समर्थन के साथ।

<!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: #2274A5;
      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: #1a5d85;
    }
    .btn.encode {
      background: #db133a;
    }
    .btn.encode:hover {
      background: #b01030;
    }
    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: #2274A5;
    }
    .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 atob() मेथड डेमो</h1>
  
  <textarea id="inputText" placeholder="Base64 स्ट्रिंग दर्ज करें डीकोड करने के लिए... (या ऊपर एन्कोड करें)"></textarea>
  
  <button class="btn encode" onclick="encodeMessage()">पहले एन्कोड करें (btoa)</button>
  <button class="btn" onclick="decodeMessage()">डीकोड करें (atob)</button>
  
  <div class="show" id="output"></div>
  
  <details style="margin: 2rem auto; max-width: 500px; text-align: left; color: #fff;">
    <summary>यूनिकोड Base64 डीकोडिंग</summary>
    <p>atob() Latin1 स्ट्रिंग लौटाता है। यूनिकोड के लिए UTF-8 डीकोडिंग आवश्यक है:</p>
    <pre>function b64ToUtf8(base64) {
  return decodeURIComponent(escape(atob(base64)));
}

// उपयोग:
const encoded = "4KSu4KWL4KSoIOCkuOCliw=="; // "नमस्ते" का Base64
const decoded = b64ToUtf8(encoded); // "नमस्ते"

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

आउटपुट (Output)

Base64 स्ट्रिंग दर्ज करने के बाद "डीकोड करें" पर क्लिक:

HTML Window atob() मेथड: Base64 डीकोडिंग

डीकोडेड परिणाम (यूनिकोड सही ढंग से संभाला गया):

HTML Window atob() मेथड: Base64 डीकोडिंग

अमान्य Base64 पर त्रुटि:

HTML Window atob() मेथड: Base64 डीकोडिंग

तकनीकी विवरण

Base64 डीकोडिंग प्रक्रिया

इनपुट मान्यता: केवल A-Z, a-z, 0-9, +, /, = (पैडिंग) वर्ण अनुमत।
लंबाई 4 का गुणक होनी चाहिए (पैडिंग के साथ)।
प्रत्येक 4 Base64 वर्ण → 3 बाइनरी बाइट्स (24 बिट्स)।
आउटपुट Latin1 बाइनरी स्ट्रिंग (प्रत्येक बाइट 0-255)।

आम त्रुटियां और समाधान

त्रुटि	कारण	समाधान
`InvalidCharacterError`	अमान्य वर्ण (स्पेस, लाइन ब्रेक, आदि)	`str.replace(/[^A-Za-z0-9+/=]/g, '')` से साफ करें
`InvalidCharacterError`	गलत पैडिंग	लंबाई 4 के गुणक तक पैड करें: `str += '='.repeat((4 - str.length % 4) % 4)`
गलत यूनिकोड आउटपुट	Latin1 के बजाय UTF-8 की अपेक्षा	`decodeURIComponent(escape(atob(str)))` उपयोग करें

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

JWT टोकन डीकोडिंग: हेडर और पेलोड निकालना (हस्ताक्षर सत्यापन के बिना)।
डेटा URL प्रोसेसिंग: data:image/png;base64,... से छवि डेटा निकालना।
API प्रतिक्रिया: कुछ API Base64-एन्कोडेड JSON/बाइनरी लौटाते हैं।
माइग्रेशन: लीगेसी Base64-स्टोर्ड डेटा पढ़ना।

सुरक्षा नोट

atob() निष्पादन योग्य कोड नहीं बनाता; यह केवल डेटा डीकोड करता है।
डीकोडेड डेटा को eval() या innerHTML के माध्यम से निष्पादित न करें बिना सैनिटाइजेशन के।
बड़े Base64 स्ट्रिंग्स (मेगाबाइट्स) मेमोरी समस्याएं पैदा कर सकते हैं; स्ट्रीमिंग डीकोडर पर विचार करें।

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

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