{"id":1291,"date":"2026-02-06T23:15:10","date_gmt":"2026-02-06T15:15:10","guid":{"rendered":"https:\/\/blog.guguan.us.kg\/?p=1291"},"modified":"2026-04-22T01:39:26","modified_gmt":"2026-04-21T17:39:26","slug":"base64-%e5%9c%a8%e7%ba%bf%e7%bc%96%e7%a0%81-%e8%a7%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/blog.guguan.us.kg\/?p=1291","title":{"rendered":"Base64 \u5728\u7ebf\u7f16\u7801 \/ \u89e3\u7801"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u5c06\u6587\u672c\u6216\u6587\u4ef6\u7f16\u7801\u6210Base64\uff0c\u6216\u5c06Base64\u6587\u672c\u89e3\u7801\u6210\u6587\u672c\u6216\u6587\u4ef6<\/p>\n\n\n\n<div>\n\t<label><input type=\"radio\" name=\"mode\" value=\"encode\" checked> \u7f16\u7801<\/label>\n\t<label><input type=\"radio\" name=\"mode\" value=\"decode\"> \u89e3\u7801<\/label>\n<\/div>\n\n<p><textarea id=\"input\" placeholder=\"\u5728\u6b64\u7c98\u8d34\u6587\u672c\"><\/textarea><\/p>\n\n<div>\n\t<button onclick=\"process()\">\u6267\u884c \u2193<\/button>\n\t<label>\n\t\t<input type=\"file\" id=\"fileInput\" style=\"display:none\">\n\t\t<button onclick=\"document.getElementById('fileInput').click()\">\u9009\u62e9\u6587\u4ef6<\/button>\n\t<\/label>\n\t<button onclick=\"copyResult()\" id=\"copyBtn\" disabled>\u590d\u5236\u7ed3\u679c<\/button>\n\t<button onclick=\"downloadResult()\" id=\"downloadBtn\" style=\"display:none\" disabled>\u4e0b\u8f7d\u6587\u4ef6<\/button>\n\t<button onclick=\"clearAll()\">\u6e05\u7a7a<\/button>\n<\/div>\n\n<p><textarea id=\"result\" placeholder=\"\u7ed3\u679c\u5c06\u663e\u793a\u5728\u8fd9\u91cc...\" readonly><\/textarea><\/p>\n\n<script>\nconst input = document.getElementById('input');\nconst result = document.getElementById('result');\nconst fileInput = document.getElementById('fileInput');\nconst copyBtn = document.getElementById('copyBtn');\nconst downloadBtn = document.getElementById('downloadBtn');\nconst modes = document.querySelectorAll('input[name=\"mode\"]');\n\nlet currentFileData = null;\n\n\/\/ --- 1. \u65b0\u589e\uff1a\u5207\u6362\u6a21\u5f0f\u65f6\u63a7\u5236\u6309\u94ae\u663e\u793a\/\u9690\u85cf ---\nmodes.forEach(radio => {\n    radio.addEventListener('change', () => {\n        if (radio.value === 'encode') {\n            fileInput.parentElement.style.display = 'inline-block'; \/\/ \u7f16\u7801\u6a21\u5f0f\u663e\u793a\u83b7\u53d6\u6309\u94ae\u7684\u7236\u7ea7 label\n\t\t\tdownloadBtn.style.display = 'none';\n        } else {\n            fileInput.parentElement.style.display = 'none';         \/\/ \u89e3\u7801\u6a21\u5f0f\u9690\u85cf\u83b7\u53d6\u6309\u94ae\u7684\u7236\u7ea7 label\n\t\t\tdownloadBtn.style.display = 'inline-block';\n        }\n\t\tcopyBtn.disabled = true;\n        clearAll(); \/\/ \u5207\u6362\u6a21\u5f0f\u65f6\u987a\u4fbf\u6e05\u7a7a\uff0c\u9632\u6b62\u6570\u636e\u6df7\u6dc6\u55b5\n    });\n});\n\n\/\/ \u5904\u7406\u6587\u4ef6\u9009\u62e9\nfileInput.onchange = e => {\n    const file = e.target.files[0];\n    if (!file) return;\n\n    const reader = new FileReader();\n    reader.onload = () => {\n        const bytes = new Uint8Array(reader.result);\n        \/\/ \u4f7f\u7528\u66f4\u7a33\u59a5\u7684\u65b9\u5f0f\u5904\u7406\u4e8c\u8fdb\u5236\u8f6cBase64\n        let binary = '';\n        bytes.forEach(b => binary += String.fromCharCode(b));\n        result.textContent = btoa(binary);\n\t\tcopyBtn.disabled = false;\n    };\n    reader.readAsArrayBuffer(file);\n};\n\n\/\/ \u6267\u884c\u5904\u7406\u903b\u8f91\nfunction process() {\n    const mode = document.querySelector('input[name=\"mode\"]:checked').value;\n    const text = input.value.trim();\n    if (!text) return;\n\n    try {\n        if (mode === 'encode') {\n            \/\/ \u7f16\u7801\u903b\u8f91\uff1a\u6587\u672c -> Base64\n            const encoded = btoa(unescape(encodeURIComponent(text)));\n            result.textContent = encoded;\n            \/\/ \u7f16\u7801\u65f6\u4e5f\u53ef\u4ee5\u652f\u6301\u4e0b\u8f7d\u751f\u6210\u7684 txt \u55b5\n            currentFileData = new Blob([encoded], {type: 'text\/plain'});\n            downloadBtn.disabled = false;\n        } else {\n            \/\/ --- \u89e3\u7801\u903b\u8f91\u6539\u8fdb ---\n            \/\/ 1. \u5148\u8f6c\u6210\u4e8c\u8fdb\u5236\n            const binaryString = atob(text);\n            const len = binaryString.length;\n            const bytes = new Uint8Array(len);\n            for (let i = 0; i < len; i++) {\n                bytes[i] = binaryString.charCodeAt(i);\n            }\n            \n            \/\/ \u4fdd\u5b58 Blob\uff0c\u8fd9\u6837\u6587\u672c\u4e5f\u53ef\u4ee5\u4e0b\u8f7d\u5566\uff01\n            currentFileData = new Blob([bytes]);\n            downloadBtn.disabled = false;\n\n            \/\/ 2. \u68c0\u6d4b\u662f\u5426\u4e3a\u53ef\u8bfb\u6587\u672c\n            \/\/ \u6211\u4eec\u68c0\u67e5\u524d 1024 \u5b57\u8282\u91cc\u6709\u6ca1\u6709 0 (Null \u5b57\u7b26)\uff0c\u901a\u5e38\u4e8c\u8fdb\u5236\u6587\u4ef6\u624d\u4f1a\u6709\n            const isBinary = bytes.slice(0, 1024).some(byte => byte === 0);\n\n            if (!isBinary) {\n                try {\n                    \/\/ \u5c1d\u8bd5\u7528 UTF-8 \u89e3\u7801\u663e\u793a\n                    const decoder = new TextDecoder('utf-8', { fatal: true });\n                    result.textContent = decoder.decode(bytes);\n\t\t\t\t\tcopyBtn.disabled = false;\n                } catch (e) {\n                    \/\/ \u5982\u679c UTF-8 \u89e3\u7801\u5931\u8d25\uff0c\u53ef\u80fd\u8fd8\u662f\u4e8c\u8fdb\u5236\n                    result.textContent = \"[\u5185\u5bb9\u5305\u542b\u975e\u6587\u672c\u7f16\u7801\uff0c\u8bf7\u70b9\u51fb\u4e0b\u8f7d\u67e5\u770b]\";\n\t\t\t\t\tcopyBtn.disabled = true;\n                }\n            } else {\n                result.textContent = \"[\u68c0\u6d4b\u5230\u4e8c\u8fdb\u5236\u6587\u4ef6\uff0c\u8bf7\u70b9\u51fb\u4e0b\u8f7d\u4fdd\u5b58]\";\n\t\t\t\tcopyBtn.disabled = true;\n            }\n        }\n    } catch (err) {\n        result.textContent = \"\u274c Base64 \u683c\u5f0f\u975e\u6cd5\uff0c\u89e3\u6790\u5931\u8d25\u55b5~\";\n        downloadBtn.disabled = true;\n\t\tcopyBtn.disabled = true;\n    }\n}\n\nfunction copyResult() {\n\tconst text = result.textContent;\n\t\n\tnavigator.clipboard.writeText(text).then(() => {\n\t\tconst old = result.textContent;\n\t\tsetTimeout(() => result.textContent = old, 1400);\n\t});\n}\n\nfunction downloadResult() {\n\tif (!currentFileData) return;\n\t\n\tconst a = document.createElement('a');\n\ta.href = URL.createObjectURL(currentFileData);\n\ta.download = `decoded_${Date.now()}`;\n\ta.click();\n}\n\nfunction clearAll() {\n\tinput.value = '';\n\tresult.textContent = '';\n\tdownloadBtn.disabled = true;\n\tcurrentFileData = null;\n}\n<\/script>\n<style>\n\tbody {\n\t\tfont-family: system-ui, sans-serif;\n\t\tline-height: 1.5;\n\t\tmax-width: 720px;\n\t\tmargin: 20px auto;\n\t\tpadding: 0 12px;\n\t}\n\ttextarea {\n\t\twidth: 100%;\n\t\theight: 120px;\n\t\tfont-family: 'Consolas', monospace;\n\t\tpadding: 8px;\n\t\tbox-sizing: border-box;\n\t}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>\u5c06\u6587\u672c\u6216\u6587\u4ef6\u7f16\u7801\u6210Base64\uff0c\u6216\u5c06Base64\u6587\u672c\u89e3\u7801\u6210\u6587\u672c\u6216\u6587\u4ef6 \u7f16\u7801 \u89e3\u7801 \u6267\u884c \u2193 \u9009\u62e9\u6587\u4ef6 \u590d\u5236\u7ed3\u679c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[140],"class_list":["post-1291","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-tools"],"_links":{"self":[{"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=\/wp\/v2\/posts\/1291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1291"}],"version-history":[{"count":4,"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=\/wp\/v2\/posts\/1291\/revisions"}],"predecessor-version":[{"id":1295,"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=\/wp\/v2\/posts\/1291\/revisions\/1295"}],"wp:attachment":[{"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.guguan.us.kg\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}