{"id":4195,"date":"2025-05-14T08:23:15","date_gmt":"2025-05-14T08:23:15","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4195"},"modified":"2025-05-29T15:40:51","modified_gmt":"2025-05-29T15:40:51","slug":"base64-converter","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/base64-converter\/","title":{"rendered":"Base64 Converter"},"content":{"rendered":"<div class=\"ingenio-tool base64-converter-wrapper\" role=\"region\" aria-labelledby=\"base64-converter-title\">\r\n  <div class=\"base64-converter\">\r\n    <h2 id=\"base64-converter-title\">\ud83d\udd24 Base64 Converter<\/h2>\r\n    \r\n    <div class=\"converter-tabs\">\r\n      <button class=\"tab-btn active\" data-tab=\"text-tab\">Text<\/button>\r\n      <button class=\"tab-btn\" data-tab=\"file-tab\">File<\/button>\r\n      <button class=\"tab-btn\" data-tab=\"image-tab\">Image<\/button>\r\n    <\/div>\r\n    \r\n    <div class=\"tab-content active\" id=\"text-tab\">\r\n      <div class=\"input-group\">\r\n        <label for=\"text-input\">Enter Text:<\/label>\r\n        <textarea id=\"text-input\" rows=\"5\" placeholder=\"Type or paste your text here\"><\/textarea>\r\n      <\/div>\r\n      \r\n      <div class=\"conversion-actions\">\r\n        <button id=\"encode-text\" class=\"convert-btn\">Encode to Base64<\/button>\r\n        <button id=\"decode-text\" class=\"convert-btn\">Decode from Base64<\/button>\r\n        <button id=\"clear-text\" class=\"clear-btn\">Clear<\/button>\r\n      <\/div>\r\n      \r\n      <div class=\"output-group\">\r\n        <label for=\"text-output\">Result:<\/label>\r\n        <textarea id=\"text-output\" rows=\"5\" placeholder=\"Base64 result will appear here\" readonly><\/textarea>\r\n      <\/div>\r\n      \r\n      <div class=\"text-actions\">\r\n        <button id=\"copy-text\" class=\"action-btn\">\ud83d\udccb Copy<\/button>\r\n        <button id=\"download-text\" class=\"action-btn\">\u2b07\ufe0f Download<\/button>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"tab-content\" id=\"file-tab\">\r\n      <div class=\"file-upload\">\r\n        <label for=\"file-input\" class=\"upload-label\">\r\n          <span class=\"dashicons dashicons-upload\"><\/span>\r\n          <span>Choose a file or drag it here<\/span>\r\n          <input type=\"file\" id=\"file-input\" class=\"hidden\">\r\n        <\/label>\r\n        <div id=\"file-info\" class=\"file-info\">No file selected<\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"conversion-actions\">\r\n        <button id=\"encode-file\" class=\"convert-btn\">Encode File to Base64<\/button>\r\n        <button id=\"decode-file\" class=\"convert-btn\">Decode Base64 to File<\/button>\r\n      <\/div>\r\n      \r\n      <div class=\"output-group\">\r\n        <label for=\"file-output\">Base64 Result:<\/label>\r\n        <textarea id=\"file-output\" rows=\"5\" placeholder=\"File encoded as Base64 will appear here\" readonly><\/textarea>\r\n      <\/div>\r\n      \r\n      <div class=\"file-actions\">\r\n        <button id=\"copy-file\" class=\"action-btn\">\ud83d\udccb Copy<\/button>\r\n        <button id=\"download-file\" class=\"action-btn\">\u2b07\ufe0f Download as .txt<\/button>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"tab-content\" id=\"image-tab\">\r\n      <div class=\"image-upload\">\r\n        <label for=\"image-input\" class=\"upload-label\">\r\n          <span class=\"dashicons dashicons-format-image\"><\/span>\r\n          <span>Choose an image or drag it here<\/span>\r\n          <input type=\"file\" id=\"image-input\" accept=\"image\/*\" class=\"hidden\">\r\n        <\/label>\r\n        <div id=\"image-preview\" class=\"image-preview\">\r\n          <div class=\"empty-state\">\r\n            <p>Image preview will appear here<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"conversion-actions\">\r\n        <button id=\"encode-image\" class=\"convert-btn\">Encode Image to Base64<\/button>\r\n        <button id=\"decode-image\" class=\"convert-btn\">Decode Base64 to Image<\/button>\r\n      <\/div>\r\n      \r\n      <div class=\"output-group\">\r\n        <label for=\"image-output\">Base64 Result:<\/label>\r\n        <textarea id=\"image-output\" rows=\"5\" placeholder=\"Image encoded as Base64 will appear here\" readonly><\/textarea>\r\n      <\/div>\r\n      \r\n      <div class=\"image-actions\">\r\n        <button id=\"copy-image\" class=\"action-btn\">\ud83d\udccb Copy<\/button>\r\n        <button id=\"download-image\" class=\"action-btn\">\u2b07\ufe0f Download as .txt<\/button>\r\n        <button id=\"view-image\" class=\"action-btn\">\ud83d\udc41\ufe0f View Image<\/button>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"base64-info\">\r\n      <h3>\u2139\ufe0f About Base64 Encoding<\/h3>\r\n      <div class=\"info-content\">\r\n        <p>Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. It's commonly used for:<\/p>\r\n        <ul>\r\n          <li>Encoding data for transfer over media that only support text<\/li>\r\n          <li>Embedding images directly in HTML\/CSS (data URLs)<\/li>\r\n          <li>Storing complex data in JSON or XML<\/li>\r\n          <li>Basic obfuscation of sensitive data<\/li>\r\n        <\/ul>\r\n        <p>Note: Base64 is <strong>not encryption<\/strong> and provides no security. The encoded data can be easily decoded by anyone.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .base64-converter-wrapper {\r\n    background-color: var(--bg, #f5f5fa);\r\n    padding: 1rem;\r\n  }\r\n\r\n  .base64-converter {\r\n    max-width: 1000px;\r\n    margin: auto;\r\n    background: var(--bg, #fff);\r\n    border-radius: 10px;\r\n    padding: 25px;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n  }\r\n\r\n  .base64-converter h2 {\r\n    text-align: center;\r\n    font-size: 1.8rem;\r\n    color: var(--primary, #0a66c2);\r\n    margin-bottom: 1.5rem;\r\n  }\r\n\r\n  .converter-tabs {\r\n    display: flex;\r\n    border-bottom: 1px solid #ddd;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .tab-btn {\r\n    padding: 10px 20px;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 1rem;\r\n    border-bottom: 3px solid transparent;\r\n    transition: all 0.2s;\r\n  }\r\n\r\n  .tab-btn.active {\r\n    border-bottom-color: var(--primary, #0a66c2);\r\n    color: var(--primary, #0a66c2);\r\n    font-weight: 500;\r\n  }\r\n\r\n  .tab-btn:hover:not(.active) {\r\n    border-bottom-color: #ccc;\r\n  }\r\n\r\n  .tab-content {\r\n    display: none;\r\n  }\r\n\r\n  .tab-content.active {\r\n    display: block;\r\n  }\r\n\r\n  .input-group, .output-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .input-group label, .output-group label {\r\n    margin-bottom: 8px;\r\n    font-size: 0.9rem;\r\n    font-weight: 500;\r\n    color: #333;\r\n  }\r\n\r\n  .input-group textarea, .output-group textarea {\r\n    padding: 10px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 6px;\r\n    font-size: 1rem;\r\n    resize: vertical;\r\n    font-family: monospace;\r\n  }\r\n\r\n  .output-group textarea {\r\n    background: #f9f9f9;\r\n  }\r\n\r\n  .conversion-actions {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-bottom: 20px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .convert-btn, .clear-btn, .action-btn {\r\n    padding: 10px 15px;\r\n    border: none;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    font-size: 0.95rem;\r\n    transition: all 0.2s;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .convert-btn {\r\n    background: var(--primary, #0a66c2);\r\n    color: white;\r\n  }\r\n\r\n  .convert-btn:hover {\r\n    background: var(--primary-dark, #084a9e);\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n  }\r\n\r\n  .clear-btn {\r\n    background: #f0f0f0;\r\n    color: #333;\r\n  }\r\n\r\n  .clear-btn:hover {\r\n    background: #e0e0e0;\r\n  }\r\n\r\n  .action-btn {\r\n    background: #e0e0e0;\r\n    color: #333;\r\n  }\r\n\r\n  .action-btn:hover {\r\n    background: #d0d0d0;\r\n  }\r\n\r\n  .text-actions, .file-actions, .image-actions {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .file-upload, .image-upload {\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .upload-label {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 30px;\r\n    border: 2px dashed #ddd;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    text-align: center;\r\n  }\r\n\r\n  .upload-label:hover {\r\n    border-color: var(--primary, #0a66c2);\r\n    background: rgba(10, 102, 194, 0.05);\r\n  }\r\n\r\n  .upload-label .dashicons {\r\n    font-size: 40px;\r\n    width: 40px;\r\n    height: 40px;\r\n    margin-bottom: 10px;\r\n    color: #666;\r\n  }\r\n\r\n  .hidden {\r\n    display: none;\r\n  }\r\n\r\n  .file-info {\r\n    margin-top: 10px;\r\n    font-size: 0.9rem;\r\n    color: #666;\r\n  }\r\n\r\n  .image-preview {\r\n    margin-top: 20px;\r\n    border: 1px solid #eee;\r\n    border-radius: 6px;\r\n    min-height: 150px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .image-preview img {\r\n    max-width: 100%;\r\n    max-height: 300px;\r\n    display: block;\r\n  }\r\n\r\n  .empty-state {\r\n    padding: 20px;\r\n    color: #666;\r\n    text-align: center;\r\n  }\r\n\r\n  .base64-info {\r\n    margin-top: 30px;\r\n    background: #f9f9f9;\r\n    border-radius: 6px;\r\n    padding: 20px;\r\n  }\r\n\r\n  .base64-info h3 {\r\n    margin-top: 0;\r\n    margin-bottom: 15px;\r\n    font-size: 1.2rem;\r\n  }\r\n\r\n  .info-content {\r\n    font-size: 0.9rem;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .info-content p {\r\n    margin-top: 0;\r\n  }\r\n\r\n  .info-content ul {\r\n    margin: 10px 0;\r\n    padding-left: 20px;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .converter-tabs {\r\n      overflow-x: auto;\r\n      white-space: nowrap;\r\n      padding-bottom: 5px;\r\n    }\r\n    \r\n    .tab-btn {\r\n      padding: 8px 15px;\r\n    }\r\n    \r\n    .conversion-actions {\r\n      flex-direction: column;\r\n    }\r\n    \r\n    .convert-btn, .clear-btn {\r\n      width: 100%;\r\n      justify-content: center;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  \/\/ DOM elements\r\n  const tabBtns = document.querySelectorAll('.tab-btn');\r\n  const tabContents = document.querySelectorAll('.tab-content');\r\n  \r\n  \/\/ Text tab elements\r\n  const textInput = document.getElementById('text-input');\r\n  const textOutput = document.getElementById('text-output');\r\n  const encodeTextBtn = document.getElementById('encode-text');\r\n  const decodeTextBtn = document.getElementById('decode-text');\r\n  const clearTextBtn = document.getElementById('clear-text');\r\n  const copyTextBtn = document.getElementById('copy-text');\r\n  const downloadTextBtn = document.getElementById('download-text');\r\n  \r\n  \/\/ File tab elements\r\n  const fileInput = document.getElementById('file-input');\r\n  const fileInfo = document.getElementById('file-info');\r\n  const fileOutput = document.getElementById('file-output');\r\n  const encodeFileBtn = document.getElementById('encode-file');\r\n  const decodeFileBtn = document.getElementById('decode-file');\r\n  const copyFileBtn = document.getElementById('copy-file');\r\n  const downloadFileBtn = document.getElementById('download-file');\r\n  \r\n  \/\/ Image tab elements\r\n  const imageInput = document.getElementById('image-input');\r\n  const imagePreview = document.getElementById('image-preview');\r\n  const imageOutput = document.getElementById('image-output');\r\n  const encodeImageBtn = document.getElementById('encode-image');\r\n  const decodeImageBtn = document.getElementById('decode-image');\r\n  const copyImageBtn = document.getElementById('copy-image');\r\n  const downloadImageBtn = document.getElementById('download-image');\r\n  const viewImageBtn = document.getElementById('view-image');\r\n  \r\n  \/\/ Tab switching\r\n  tabBtns.forEach(btn => {\r\n    btn.addEventListener('click', function() {\r\n      const tabId = this.dataset.tab;\r\n      \r\n      \/\/ Update active tab button\r\n      document.querySelector('.tab-btn.active').classList.remove('active');\r\n      this.classList.add('active');\r\n      \r\n      \/\/ Update active tab content\r\n      document.querySelector('.tab-content.active').classList.remove('active');\r\n      document.getElementById(tabId).classList.add('active');\r\n    });\r\n  });\r\n  \r\n  \/\/ Text tab functionality\r\n  encodeTextBtn.addEventListener('click', function() {\r\n    const text = textInput.value.trim();\r\n    if (!text) {\r\n      alert('Please enter some text to encode');\r\n      return;\r\n    }\r\n    \r\n    textOutput.value = btoa(unescape(encodeURIComponent(text)));\r\n  });\r\n  \r\n  decodeTextBtn.addEventListener('click', function() {\r\n    const base64 = textInput.value.trim();\r\n    if (!base64) {\r\n      alert('Please enter Base64 text to decode');\r\n      return;\r\n    }\r\n    \r\n    try {\r\n      textOutput.value = decodeURIComponent(escape(atob(base64)));\r\n    } catch (e) {\r\n      alert('Invalid Base64 input');\r\n      console.error(e);\r\n    }\r\n  });\r\n  \r\n  clearTextBtn.addEventListener('click', function() {\r\n    textInput.value = '';\r\n    textOutput.value = '';\r\n  });\r\n  \r\n  copyTextBtn.addEventListener('click', function() {\r\n    if (!textOutput.value) {\r\n      alert('No result to copy');\r\n      return;\r\n    }\r\n    \r\n    textOutput.select();\r\n    document.execCommand('copy');\r\n    \r\n    \/\/ Show feedback\r\n    const originalText = copyTextBtn.innerHTML;\r\n    copyTextBtn.innerHTML = '\u2705 Copied!';\r\n    setTimeout(() => {\r\n      copyTextBtn.innerHTML = originalText;\r\n    }, 2000);\r\n  });\r\n  \r\n  downloadTextBtn.addEventListener('click', function() {\r\n    if (!textOutput.value) {\r\n      alert('No result to download');\r\n      return;\r\n    }\r\n    \r\n    downloadFile('base64-result.txt', textOutput.value);\r\n  });\r\n  \r\n  \/\/ File tab functionality\r\n  fileInput.addEventListener('change', function() {\r\n    if (this.files.length > 0) {\r\n      const file = this.files[0];\r\n      fileInfo.textContent = `${file.name} (${formatFileSize(file.size)})`;\r\n    } else {\r\n      fileInfo.textContent = 'No file selected';\r\n    }\r\n  });\r\n  \r\n  encodeFileBtn.addEventListener('click', function() {\r\n    if (!fileInput.files || fileInput.files.length === 0) {\r\n      alert('Please select a file first');\r\n      return;\r\n    }\r\n    \r\n    const file = fileInput.files[0];\r\n    const reader = new FileReader();\r\n    \r\n    reader.onload = function(e) {\r\n      const base64String = e.target.result.split(',')[1];\r\n      fileOutput.value = base64String;\r\n    };\r\n    \r\n    reader.onerror = function() {\r\n      alert('Error reading file');\r\n    };\r\n    \r\n    reader.readAsDataURL(file);\r\n  });\r\n  \r\n  decodeFileBtn.addEventListener('click', function() {\r\n    const base64 = fileOutput.value.trim();\r\n    if (!base64) {\r\n      alert('Please encode a file first or paste Base64 data');\r\n      return;\r\n    }\r\n    \r\n    try {\r\n      \/\/ Try to determine file type from Base64\r\n      let mimeType = 'application\/octet-stream';\r\n      if (base64.startsWith('iVBORw0KGgo')) {\r\n        mimeType = 'image\/png';\r\n      } else if (base64.startsWith('\/9j\/')) {\r\n        mimeType = 'image\/jpeg';\r\n      } else if (base64.startsWith('R0lGOD')) {\r\n        mimeType = 'image\/gif';\r\n      }\r\n      \r\n      const byteCharacters = atob(base64);\r\n      const byteNumbers = new Array(byteCharacters.length);\r\n      \r\n      for (let i = 0; i < byteCharacters.length; i++) {\r\n        byteNumbers[i] = byteCharacters.charCodeAt(i);\r\n      }\r\n      \r\n      const byteArray = new Uint8Array(byteNumbers);\r\n      const blob = new Blob([byteArray], {type: mimeType});\r\n      const url = URL.createObjectURL(blob);\r\n      \r\n      downloadFile('decoded-file', url, true);\r\n    } catch (e) {\r\n      alert('Invalid Base64 input');\r\n      console.error(e);\r\n    }\r\n  });\r\n  \r\n  copyFileBtn.addEventListener('click', function() {\r\n    if (!fileOutput.value) {\r\n      alert('No result to copy');\r\n      return;\r\n    }\r\n    \r\n    fileOutput.select();\r\n    document.execCommand('copy');\r\n    \r\n    \/\/ Show feedback\r\n    const originalText = copyFileBtn.innerHTML;\r\n    copyFileBtn.innerHTML = '\u2705 Copied!';\r\n    setTimeout(() => {\r\n      copyFileBtn.innerHTML = originalText;\r\n    }, 2000);\r\n  });\r\n  \r\n  downloadFileBtn.addEventListener('click', function() {\r\n    if (!fileOutput.value) {\r\n      alert('No result to download');\r\n      return;\r\n    }\r\n    \r\n    downloadFile('base64-file.txt', fileOutput.value);\r\n  });\r\n  \r\n  \/\/ Image tab functionality\r\n  imageInput.addEventListener('change', function() {\r\n    if (this.files && this.files[0]) {\r\n      const file = this.files[0];\r\n      const reader = new FileReader();\r\n      \r\n      reader.onload = function(e) {\r\n        imagePreview.innerHTML = `<img decoding=\"async\" src=\"${e.target.result}\" alt=\"Preview\">`;\r\n      };\r\n      \r\n      reader.readAsDataURL(file);\r\n    } else {\r\n      imagePreview.innerHTML = '<div class=\"empty-state\"><p>Image preview will appear here<\/p><\/div>';\r\n    }\r\n  });\r\n  \r\n  encodeImageBtn.addEventListener('click', function() {\r\n    if (!imageInput.files || imageInput.files.length === 0) {\r\n      alert('Please select an image first');\r\n      return;\r\n    }\r\n    \r\n    const file = imageInput.files[0];\r\n    const reader = new FileReader();\r\n    \r\n    reader.onload = function(e) {\r\n      imageOutput.value = e.target.result.split(',')[1];\r\n    };\r\n    \r\n    reader.onerror = function() {\r\n      alert('Error reading image');\r\n    };\r\n    \r\n    reader.readAsDataURL(file);\r\n  });\r\n  \r\n  decodeImageBtn.addEventListener('click', function() {\r\n    const base64 = imageOutput.value.trim();\r\n    if (!base64) {\r\n      alert('Please encode an image first or paste Base64 data');\r\n      return;\r\n    }\r\n    \r\n    try {\r\n      const img = document.createElement('img');\r\n      img.src = `data:image\/png;base64,${base64}`;\r\n      \r\n      img.onload = function() {\r\n        imagePreview.innerHTML = '';\r\n        imagePreview.appendChild(img);\r\n      };\r\n      \r\n      img.onerror = function() {\r\n        alert('Invalid image data');\r\n      };\r\n    } catch (e) {\r\n      alert('Invalid Base64 input');\r\n      console.error(e);\r\n    }\r\n  });\r\n  \r\n  copyImageBtn.addEventListener('click', function() {\r\n    if (!imageOutput.value) {\r\n      alert('No result to copy');\r\n      return;\r\n    }\r\n    \r\n    imageOutput.select();\r\n    document.execCommand('copy');\r\n    \r\n    \/\/ Show feedback\r\n    const originalText = copyImageBtn.innerHTML;\r\n    copyImageBtn.innerHTML = '\u2705 Copied!';\r\n    setTimeout(() => {\r\n      copyImageBtn.innerHTML = originalText;\r\n    }, 2000);\r\n  });\r\n  \r\n  downloadImageBtn.addEventListener('click', function() {\r\n    if (!imageOutput.value) {\r\n      alert('No result to download');\r\n      return;\r\n    }\r\n    \r\n    downloadFile('base64-image.txt', imageOutput.value);\r\n  });\r\n  \r\n  viewImageBtn.addEventListener('click', function() {\r\n    const base64 = imageOutput.value.trim();\r\n    if (!base64) {\r\n      alert('No image data to view');\r\n      return;\r\n    }\r\n    \r\n    const win = window.open();\r\n    win.document.write(\r\n      `<img decoding=\"async\" src=\"data:image\/png;base64,${base64}\" style=\"max-width:100%;height:auto;\">`\r\n    );\r\n  });\r\n  \r\n  \/\/ Drag and drop functionality\r\n  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {\r\n    ['file-upload', 'image-upload'].forEach(id => {\r\n      const element = document.querySelector(`#${id} .upload-label`);\r\n      \r\n      element.addEventListener(eventName, preventDefaults, false);\r\n      \r\n      function preventDefaults(e) {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n      }\r\n    });\r\n  });\r\n  \r\n  ['dragenter', 'dragover'].forEach(eventName => {\r\n    ['file-upload', 'image-upload'].forEach(id => {\r\n      const element = document.querySelector(`#${id} .upload-label`);\r\n      \r\n      element.addEventListener(eventName, highlight, false);\r\n      \r\n      function highlight() {\r\n        this.classList.add('highlight');\r\n      }\r\n    });\r\n  });\r\n  \r\n  ['dragleave', 'drop'].forEach(eventName => {\r\n    ['file-upload', 'image-upload'].forEach(id => {\r\n      const element = document.querySelector(`#${id} .upload-label`);\r\n      \r\n      element.addEventListener(eventName, unhighlight, false);\r\n      \r\n      function unhighlight() {\r\n        this.classList.remove('highlight');\r\n      }\r\n    });\r\n  });\r\n  \r\n  ['file-upload', 'image-upload'].forEach(id => {\r\n    const dropArea = document.querySelector(`#${id} .upload-label`);\r\n    const fileInput = document.querySelector(`#${id} input[type=\"file\"]`);\r\n    \r\n    dropArea.addEventListener('drop', handleDrop, false);\r\n    \r\n    function handleDrop(e) {\r\n      const dt = e.dataTransfer;\r\n      const files = dt.files;\r\n      \r\n      if (files.length) {\r\n        fileInput.files = files;\r\n        \r\n        \/\/ Trigger change event\r\n        const event = new Event('change');\r\n        fileInput.dispatchEvent(event);\r\n      }\r\n    }\r\n  });\r\n  \r\n  \/\/ Helper functions\r\n  function formatFileSize(bytes) {\r\n    if (bytes === 0) return '0 Bytes';\r\n    \r\n    const k = 1024;\r\n    const sizes = ['Bytes', 'KB', 'MB', 'GB'];\r\n    const i = Math.floor(Math.log(bytes) \/ Math.log(k));\r\n    \r\n    return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\r\n  }\r\n  \r\n  function downloadFile(filename, content, isUrl = false) {\r\n    const element = document.createElement('a');\r\n    \r\n    if (isUrl) {\r\n      element.href = content;\r\n    } else {\r\n      const blob = new Blob([content], {type: 'text\/plain'});\r\n      element.href = URL.createObjectURL(blob);\r\n    }\r\n    \r\n    element.download = filename;\r\n    document.body.appendChild(element);\r\n    element.click();\r\n    document.body.removeChild(element);\r\n    \r\n    if (!isUrl) {\r\n      setTimeout(() => {\r\n        URL.revokeObjectURL(element.href);\r\n      }, 100);\r\n    }\r\n  }\r\n});\r\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd10 Free Online Base64 Converter (Encode &amp; Decode)<\/h2>\n\n\n\n<p>Convert data to and from Base64 format instantly with this simple online Base64 Converter tool. Whether you&#8217;re working with text, images, or files, our tool makes it easy to encode or decode Base64 for secure transmission and storage.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2728 Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udd04 <strong>Encode to Base64<\/strong> \u2013 Convert text or binary to Base64<\/li>\n\n\n\n<li>\ud83d\udd13 <strong>Decode Base64<\/strong> \u2013 Convert Base64 strings back to readable format<\/li>\n\n\n\n<li>\ud83d\udcc4 <strong>Supports Files<\/strong> \u2013 Encode images, PDFs, or other binary files<\/li>\n\n\n\n<li>\u26a1 <strong>Instant Conversion<\/strong> \u2013 No delays, no fuss<\/li>\n\n\n\n<li>\ud83d\udd12 <strong>Secure &amp; Private<\/strong> \u2013 Data stays on your device; nothing is stored<\/li>\n\n\n\n<li>\ud83d\udeab <strong>No Account Needed<\/strong> \u2013 Use it freely, anytime<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\ude80 How to Use<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Paste your text or upload a file<\/strong><\/li>\n\n\n\n<li>Click <strong>\u201cEncode\u201d<\/strong> to get the Base64 version<\/li>\n\n\n\n<li>Click <strong>\u201cDecode\u201d<\/strong> to revert a Base64 string to its original form<\/li>\n\n\n\n<li><strong>Copy, use, or download<\/strong> the result instantly<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddd1\u200d\ud83d\udcbb Who Should Use This Tool?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Web Developers<\/strong> \u2013 Embed images or data directly in HTML or CSS<\/li>\n\n\n\n<li><strong>App Developers<\/strong> \u2013 Encode binary data for safe transport via APIs<\/li>\n\n\n\n<li><strong>Security Analysts<\/strong> \u2013 Analyze Base64-encoded payloads<\/li>\n\n\n\n<li><strong>Email Marketers<\/strong> \u2013 Use Base64 in inline email attachments<\/li>\n\n\n\n<li><strong>Students &amp; Learners<\/strong> \u2013 Understand how data is encoded for the web<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udca1 What Is Base64?<\/h2>\n\n\n\n<p>Base64 is a binary-to-text encoding scheme that converts binary data into an ASCII string format. It\u2019s commonly used in email via MIME, data embedding, or secure data transmission.<\/p>\n\n\n\n<p><strong>Example:<\/strong><br>Text: <code>Hello<\/code><br>Base64: <code>SGVsbG8=<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 Encode &amp; Decode Base64 Securely \u2013 Try It Now!<\/h2>\n\n\n\n<p>Whether you&#8217;re converting text, HTML, or images, this Base64 tool gives you instant and accurate results\u2014no sign-ups or downloads required.<\/p>\n\n\n\n<p>\ud83d\udc49 <strong>[Start Encoding or Decoding]<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd24 Base64 Converter Text File Image Enter Text: Encode to Base64 Decode from Base64 Clear Result: \ud83d\udccb Copy \u2b07\ufe0f Download Choose a file or drag it here No file selected Encode File to Base64 Decode Base64 to File Base64 Result: \ud83d\udccb Copy \u2b07\ufe0f Download as .txt Choose an image or drag it here Image preview [&hellip;]<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/base64-converter\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4195","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4195\/revisions"}],"predecessor-version":[{"id":4554,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4195\/revisions\/4554"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4195"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}