{"id":1352,"date":"2026-07-13T19:40:36","date_gmt":"2026-07-13T11:40:36","guid":{"rendered":"https:\/\/aimc.skyate.com\/?page_id=1352"},"modified":"2026-07-13T19:47:36","modified_gmt":"2026-07-13T11:47:36","slug":"aimc-base64","status":"publish","type":"page","link":"https:\/\/aimc.skyate.com\/index.php\/aimc-base64\/","title":{"rendered":"Base64\u8f6c\u6362\u5de5\u5177"},"content":{"rendered":"\n<!-- \u5b89\u5168\u7248 Base64\/HEX \u8f6c\u6362\u5668 (\u65e0\u7279\u6b8a\u5b57\u7b26\uff0c\u517c\u5bb9 WordPress) -->\n<style>\n    .wp-converter-wrap * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n    .wp-converter-wrap {\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n        background: transparent;\n        max-width: 820px;\n        margin: 20px auto;\n        padding: 0 16px;\n    }\n    .wp-converter-wrap .container {\n        background: #ffffff;\n        border-radius: 28px;\n        box-shadow: 0 20px 60px rgba(0, 20, 40, 0.08), 0 8px 24px rgba(0, 20, 40, 0.04);\n        padding: 32px 28px;\n        border: 1px solid #edf2f7;\n    }\n    .wp-converter-wrap .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-bottom: 28px;\n        flex-wrap: wrap;\n        gap: 12px;\n    }\n    .wp-converter-wrap .header h1 {\n        font-size: 24px;\n        font-weight: 600;\n        color: #0b1a2e;\n        letter-spacing: -0.3px;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        margin: 0;\n    }\n    .wp-converter-wrap .header h1 span {\n        background: #eef3fa;\n        padding: 4px 14px;\n        border-radius: 40px;\n        font-size: 13px;\n        font-weight: 500;\n        color: #2c5f8a;\n    }\n    .wp-converter-wrap .header-actions {\n        display: flex;\n        gap: 8px;\n    }\n    .wp-converter-wrap .header-actions button {\n        background: transparent;\n        border: none;\n        font-size: 20px;\n        cursor: pointer;\n        padding: 6px 10px;\n        border-radius: 10px;\n        color: #5f6f82;\n        transition: background 0.15s, color 0.15s;\n        line-height: 1;\n    }\n    .wp-converter-wrap .header-actions button:hover {\n        background: #f0f4fa;\n        color: #0b1a2e;\n    }\n    .wp-converter-wrap .converter-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 24px;\n        margin-bottom: 24px;\n    }\n    @media (max-width: 640px) {\n        .wp-converter-wrap .converter-grid {\n            grid-template-columns: 1fr;\n            gap: 20px;\n        }\n        .wp-converter-wrap .container {\n            padding: 20px 16px;\n        }\n        .wp-converter-wrap .header h1 {\n            font-size: 20px;\n        }\n    }\n    .wp-converter-wrap .panel {\n        background: #f9fbfd;\n        border-radius: 18px;\n        padding: 16px 16px 12px;\n        border: 1px solid #edf2f7;\n        display: flex;\n        flex-direction: column;\n    }\n    .wp-converter-wrap .panel:focus-within {\n        border-color: #b6cde3;\n    }\n    .wp-converter-wrap .panel-label {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 8px;\n        font-size: 14px;\n        font-weight: 500;\n        color: #2c4058;\n    }\n    .wp-converter-wrap .panel-label .badge {\n        font-weight: 400;\n        font-size: 12px;\n        color: #7a8b9f;\n        background: #eef2f6;\n        padding: 2px 12px;\n        border-radius: 20px;\n    }\n    .wp-converter-wrap .panel textarea {\n        width: 100%;\n        min-height: 160px;\n        background: transparent;\n        border: none;\n        outline: none;\n        resize: vertical;\n        font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;\n        font-size: 15px;\n        line-height: 1.7;\n        color: #0b1a2e;\n        padding: 4px 2px;\n        flex: 1;\n    }\n    .wp-converter-wrap .panel textarea::placeholder {\n        color: #b0c0d0;\n        font-family: 'Inter', sans-serif;\n    }\n    .wp-converter-wrap .panel textarea:disabled {\n        opacity: 0.7;\n        cursor: not-allowed;\n    }\n    .wp-converter-wrap .panel-output {\n        background: #f7faff;\n        border-color: #e3ebf5;\n    }\n    .wp-converter-wrap .panel-output textarea {\n        color: #0b2a44;\n    }\n    .wp-converter-wrap .action-bar {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 10px;\n        margin-bottom: 20px;\n        justify-content: center;\n    }\n    .wp-converter-wrap .action-btn {\n        padding: 10px 22px;\n        border: none;\n        border-radius: 40px;\n        font-size: 14px;\n        font-weight: 500;\n        background: #edf2f8;\n        color: #1d3b5a;\n        cursor: pointer;\n        transition: background 0.15s, transform 0.1s, box-shadow 0.15s;\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        flex: 0 1 auto;\n        line-height: 1.2;\n    }\n    .wp-converter-wrap .action-btn:hover {\n        background: #dde6f0;\n        box-shadow: 0 2px 8px rgba(0, 20, 40, 0.06);\n    }\n    .wp-converter-wrap .action-btn:active {\n        transform: scale(0.96);\n    }\n    .wp-converter-wrap .action-btn.primary {\n        background: #1a3d5e;\n        color: #ffffff;\n    }\n    .wp-converter-wrap .action-btn.primary:hover {\n        background: #0f2e4a;\n        box-shadow: 0 4px 14px rgba(20, 60, 120, 0.20);\n    }\n    .wp-converter-wrap .action-btn.warning {\n        background: #b8682c;\n        color: #ffffff;\n    }\n    .wp-converter-wrap .action-btn.warning:hover {\n        background: #9e5623;\n        box-shadow: 0 4px 14px rgba(184, 104, 44, 0.25);\n    }\n    .wp-converter-wrap .action-btn.outline {\n        background: transparent;\n        border: 1px solid #d0ddee;\n    }\n    .wp-converter-wrap .action-btn.outline:hover {\n        background: #f0f5fc;\n        border-color: #b6cde3;\n    }\n    .wp-converter-wrap .action-btn .icon {\n        font-size: 18px;\n        line-height: 1;\n    }\n    .wp-converter-wrap .footer-bar {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 12px;\n        margin-top: 4px;\n        padding-top: 16px;\n        border-top: 1px solid #edf2f7;\n        font-size: 13px;\n        color: #7a8b9f;\n    }\n    .wp-converter-wrap .footer-bar .status {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n    .wp-converter-wrap .footer-bar .status .dot {\n        display: inline-block;\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: #b6cde3;\n    }\n    .wp-converter-wrap .footer-bar .status .dot.active {\n        background: #2a9d6e;\n    }\n    .wp-converter-wrap .copy-feedback {\n        background: #e6f0e9;\n        color: #1f6d45;\n        padding: 4px 16px;\n        border-radius: 40px;\n        font-size: 13px;\n        font-weight: 500;\n        opacity: 0;\n        transition: opacity 0.25s;\n        pointer-events: none;\n    }\n    .wp-converter-wrap .copy-feedback.show {\n        opacity: 1;\n    }\n    .wp-converter-wrap .text-muted {\n        color: #8a9bae;\n        font-size: 13px;\n    }\n    .wp-converter-wrap .flex-center {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n    }\n    .wp-converter-wrap textarea::-webkit-scrollbar {\n        width: 5px;\n    }\n    .wp-converter-wrap textarea::-webkit-scrollbar-track {\n        background: transparent;\n    }\n    .wp-converter-wrap textarea::-webkit-scrollbar-thumb {\n        background: #d0ddee;\n        border-radius: 8px;\n    }\n    .wp-converter-wrap textarea::-webkit-scrollbar-thumb:hover {\n        background: #b6cde3;\n    }\n    @media (max-width: 480px) {\n        .wp-converter-wrap .action-btn {\n            padding: 8px 16px;\n            font-size: 13px;\n        }\n        .wp-converter-wrap .panel textarea {\n            min-height: 120px;\n            font-size: 14px;\n        }\n    }\n<\/style>\n\n<div class=\"wp-converter-wrap\">\n    <div class=\"container\">\n        <div class=\"header\">\n            <h1>\n                [\u683c\u5f0f\u8f6c\u6362]\n                <span>Base64 \u00b7 HEX \u00b7 \u5b57\u7b26\u4e32<\/span>\n            <\/h1>\n            <div class=\"header-actions\">\n                <button id=\"clearAllBtn\" title=\"\u6e05\u7a7a\u6240\u6709\">[\u6e05\u7a7a]<\/button>\n                <button id=\"swapBtn\" title=\"\u4ea4\u6362\u8f93\u5165\u8f93\u51fa\">[\u4ea4\u6362]<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"converter-grid\">\n            <div class=\"panel\">\n                <div class=\"panel-label\">\n                    <span>[\u8f93\u5165]<\/span>\n                    <span class=\"badge\" id=\"inputCharCount\">0 \u5b57\u7b26<\/span>\n                <\/div>\n                <textarea id=\"inputText\" placeholder=\"\u5728\u6b64\u7c98\u8d34\u6216\u8f93\u5165\u6587\u672c\u3001Base64 \u6216 HEX \u2026\" spellcheck=\"false\"><\/textarea>\n            <\/div>\n            <div class=\"panel panel-output\">\n                <div class=\"panel-label\">\n                    <span>[\u8f93\u51fa]<\/span>\n                    <span class=\"badge\" id=\"outputCharCount\">0 \u5b57\u7b26<\/span>\n                <\/div>\n                <textarea id=\"outputText\" placeholder=\"\u8f6c\u6362\u7ed3\u679c\u5c06\u663e\u793a\u5728\u8fd9\u91cc \u2026\" spellcheck=\"false\" readonly><\/textarea>\n            <\/div>\n        <\/div>\n\n        <div class=\"action-bar\">\n            <button class=\"action-btn primary\" id=\"base64EncodeBtn\">\u5b57\u7b26\u4e32 -> Base64<\/button>\n            <button class=\"action-btn primary\" id=\"base64DecodeBtn\">Base64 -> \u5b57\u7b26\u4e32<\/button>\n            <button class=\"action-btn warning\" id=\"base64ToHexBtn\">Base64 -> HEX<\/button>\n            <button class=\"action-btn warning\" id=\"hexToBase64Btn\">HEX -> Base64<\/button>\n            <button class=\"action-btn outline\" id=\"copyOutputBtn\">\u590d\u5236\u7ed3\u679c<\/button>\n        <\/div>\n\n        <div class=\"footer-bar\">\n            <div class=\"status\">\n                <span class=\"dot\" id=\"statusDot\"><\/span>\n                <span id=\"statusText\">\u5c31\u7eea<\/span>\n            <\/div>\n            <div class=\"flex-center\">\n                <span class=\"copy-feedback\" id=\"copyFeedback\">\u5df2\u590d\u5236<\/span>\n                <span class=\"text-muted\">\u652f\u6301 Base64 \/ HEX \u4e92\u8f6c<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        \"use strict\";\n\n        var wrap = document.querySelector(\".wp-converter-wrap\");\n        if (!wrap) return;\n\n        var inputText = wrap.querySelector(\"#inputText\");\n        var outputText = wrap.querySelector(\"#outputText\");\n        var inputCharCount = wrap.querySelector(\"#inputCharCount\");\n        var outputCharCount = wrap.querySelector(\"#outputCharCount\");\n        var statusText = wrap.querySelector(\"#statusText\");\n        var statusDot = wrap.querySelector(\"#statusDot\");\n        var copyFeedback = wrap.querySelector(\"#copyFeedback\");\n\n        var base64EncodeBtn = wrap.querySelector(\"#base64EncodeBtn\");\n        var base64DecodeBtn = wrap.querySelector(\"#base64DecodeBtn\");\n        var base64ToHexBtn = wrap.querySelector(\"#base64ToHexBtn\");\n        var hexToBase64Btn = wrap.querySelector(\"#hexToBase64Btn\");\n        var copyOutputBtn = wrap.querySelector(\"#copyOutputBtn\");\n        var clearAllBtn = wrap.querySelector(\"#clearAllBtn\");\n        var swapBtn = wrap.querySelector(\"#swapBtn\");\n\n        function setStatus(text, isActive) {\n            statusText.textContent = text;\n            if (isActive) {\n                statusDot.classList.add(\"active\");\n            } else {\n                statusDot.classList.remove(\"active\");\n            }\n        }\n\n        function updateCharCounts() {\n            var inLen = inputText.value.length;\n            var outLen = outputText.value.length;\n            inputCharCount.textContent = inLen + \" \u5b57\u7b26\";\n            outputCharCount.textContent = outLen + \" \u5b57\u7b26\";\n        }\n\n        function showCopyFeedback(msg) {\n            copyFeedback.textContent = msg || \"\u5df2\u590d\u5236\";\n            copyFeedback.classList.add(\"show\");\n            clearTimeout(copyFeedback._timer);\n            copyFeedback._timer = setTimeout(function() {\n                copyFeedback.classList.remove(\"show\");\n            }, 2000);\n        }\n\n        function setOutput(value) {\n            outputText.value = value;\n            updateCharCounts();\n        }\n\n        function getInput() {\n            return inputText.value;\n        }\n\n        \/\/ ----- \u8f6c\u6362\u529f\u80fd -----\n        function doBase64Encode() {\n            var raw = getInput();\n            if (!raw) { setStatus(\"\u8bf7\u8f93\u5165\u8981\u7f16\u7801\u7684\u5b57\u7b26\u4e32\", false); return; }\n            try {\n                var encoded = btoa(unescape(encodeURIComponent(raw)));\n                setOutput(encoded);\n                setStatus(\"\u5b57\u7b26\u4e32 -> Base64 \u6210\u529f\", true);\n            } catch (_) {\n                setStatus(\"\u7f16\u7801\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u8f93\u5165\", false);\n            }\n        }\n\n        function doBase64Decode() {\n            var raw = getInput().trim();\n            if (!raw) { setStatus(\"\u8bf7\u8f93\u5165 Base64 \u5185\u5bb9\", false); return; }\n            try {\n                var decoded = decodeURIComponent(escape(atob(raw)));\n                setOutput(decoded);\n                setStatus(\"Base64 -> \u5b57\u7b26\u4e32 \u6210\u529f\", true);\n            } catch (_) {\n                setStatus(\"\u89e3\u7801\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u662f\u5426\u4e3a\u6709\u6548\u7684 Base64\", false);\n            }\n        }\n\n        function doBase64ToHex() {\n            var raw = getInput().trim();\n            if (!raw) { setStatus(\"\u8bf7\u8f93\u5165 Base64 \u5185\u5bb9\", false); return; }\n            try {\n                var binaryStr = atob(raw);\n                var hex = \"\";\n                for (var i = 0; i < binaryStr.length; i++) {\n                    var code = binaryStr.charCodeAt(i);\n                    if (code < 0 || code > 255) {\n                        setStatus(\"\u5305\u542b\u975e\u5b57\u8282\u6570\u636e\uff0c\u65e0\u6cd5\u8f6c\u6362\", false);\n                        return;\n                    }\n                    hex += code.toString(16).toUpperCase().padStart(2, \"0\") + \" \";\n                }\n                setOutput(hex.trim());\n                setStatus(\"Base64 -> HEX \u6210\u529f\", true);\n            } catch (_) {\n                setStatus(\"\u8f6c\u6362\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5 Base64 \u662f\u5426\u6709\u6548\", false);\n            }\n        }\n\n        function doHexToBase64() {\n            var raw = getInput().trim();\n            if (!raw) { setStatus(\"\u8bf7\u8f93\u5165 HEX \u5185\u5bb9\", false); return; }\n            try {\n                var clean = raw.replace(\/\\s+\/g, \"\");\n                if (clean.length % 2 !== 0) {\n                    setStatus(\"HEX \u957f\u5ea6\u5fc5\u987b\u4e3a\u5076\u6570\", false);\n                    return;\n                }\n                var bytes = [];\n                for (var i = 0; i < clean.length; i += 2) {\n                    var byte = parseInt(clean.substring(i, i + 2), 16);\n                    if (isNaN(byte)) {\n                        setStatus(\"\u5305\u542b\u65e0\u6548\u7684 HEX \u5b57\u7b26\", false);\n                        return;\n                    }\n                    bytes.push(byte);\n                }\n                var binaryStr = String.fromCharCode.apply(null, bytes);\n                var base64 = btoa(binaryStr);\n                setOutput(base64);\n                setStatus(\"HEX -> Base64 \u6210\u529f\", true);\n            } catch (_) {\n                setStatus(\"\u8f6c\u6362\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5 HEX \u683c\u5f0f\", false);\n            }\n        }\n\n        \/\/ ----- \u8f85\u52a9\u64cd\u4f5c -----\n        function copyOutput() {\n            var text = outputText.value;\n            if (!text) { showCopyFeedback(\"\u6ca1\u6709\u5185\u5bb9\u53ef\u590d\u5236\"); return; }\n            if (navigator.clipboard && navigator.clipboard.writeText) {\n                navigator.clipboard.writeText(text).then(function() {\n                    showCopyFeedback(\"\u5df2\u590d\u5236\");\n                    setStatus(\"\u5df2\u590d\u5236\u5230\u526a\u8d34\u677f\", true);\n                }).catch(function() {\n                    fallbackCopy(text);\n                });\n            } else {\n                fallbackCopy(text);\n            }\n        }\n\n        function fallbackCopy(text) {\n            try {\n                var ta = document.createElement(\"textarea\");\n                ta.value = text;\n                ta.style.position = \"fixed\";\n                ta.style.opacity = \"0\";\n                document.body.appendChild(ta);\n                ta.select();\n                document.execCommand(\"copy\");\n                document.body.removeChild(ta);\n                showCopyFeedback(\"\u5df2\u590d\u5236\");\n                setStatus(\"\u5df2\u590d\u5236\u5230\u526a\u8d34\u677f\", true);\n            } catch (_) {\n                showCopyFeedback(\"\u590d\u5236\u5931\u8d25\uff0c\u8bf7\u624b\u52a8\u590d\u5236\");\n            }\n        }\n\n        function clearAll() {\n            inputText.value = \"\";\n            setOutput(\"\");\n            setStatus(\"\u5df2\u6e05\u7a7a\", false);\n            inputText.focus();\n        }\n\n        function swapInputOutput() {\n            var inVal = inputText.value;\n            var outVal = outputText.value;\n            inputText.value = outVal;\n            setOutput(inVal);\n            setStatus(\"\u5df2\u4ea4\u6362\", true);\n            updateCharCounts();\n        }\n\n        function ensureInputHasContent() {\n            if (!inputText.value.trim() && outputText.value.trim()) {\n                swapInputOutput();\n                return true;\n            }\n            return false;\n        }\n\n        \/\/ ----- \u7ed1\u5b9a\u4e8b\u4ef6 -----\n        base64EncodeBtn.addEventListener(\"click\", function() {\n            ensureInputHasContent();\n            doBase64Encode();\n        });\n        base64DecodeBtn.addEventListener(\"click\", function() {\n            ensureInputHasContent();\n            doBase64Decode();\n        });\n        base64ToHexBtn.addEventListener(\"click\", function() {\n            ensureInputHasContent();\n            doBase64ToHex();\n        });\n        hexToBase64Btn.addEventListener(\"click\", function() {\n            ensureInputHasContent();\n            doHexToBase64();\n        });\n        copyOutputBtn.addEventListener(\"click\", copyOutput);\n        clearAllBtn.addEventListener(\"click\", clearAll);\n        swapBtn.addEventListener(\"click\", swapInputOutput);\n\n        inputText.addEventListener(\"input\", updateCharCounts);\n        outputText.addEventListener(\"input\", updateCharCounts);\n\n        \/\/ \u5feb\u6377\u952e Ctrl+Enter (\u4ec5\u5728\u8f93\u5165\u6846)\n        inputText.addEventListener(\"keydown\", function(e) {\n            if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n                e.preventDefault();\n                var val = inputText.value.trim();\n                if (!val) return;\n                doBase64Decode();\n            }\n        });\n\n        \/\/ \u53cc\u51fb\u72b6\u6001\u70b9\u586b\u5165\u6f14\u793a\u6570\u636e\n        statusDot.addEventListener(\"dblclick\", function() {\n            var demo = \"Hello \u4e16\u754c \\nBase64 \/ HEX \u8f6c\u6362\u5de5\u5177\";\n            inputText.value = demo;\n            updateCharCounts();\n            setStatus(\"\u5df2\u586b\u5165\u6f14\u793a\u6570\u636e (\u5b57\u7b26\u4e32)\", true);\n            setOutput(\"\");\n        });\n\n        \/\/ \u521d\u59cb\u5316\n        updateCharCounts();\n        setStatus(\"\u5c31\u7eea \u00b7 \u8f93\u5165\u5185\u5bb9\u540e\u70b9\u51fb\u8f6c\u6362\", false);\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>[\u683c\u5f0f\u8f6c\u6362] Base64 \u00b7 HEX \u00b7 \u5b57\u7b26\u4e32 [\u6e05\u7a7a] [\u4ea4\u6362] [\u8f93\u5165] 0 \u5b57\u7b26 [\u8f93\u51fa] 0 \u5b57\u7b26 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1352","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aimc.skyate.com\/index.php\/wp-json\/wp\/v2\/pages\/1352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aimc.skyate.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aimc.skyate.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aimc.skyate.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aimc.skyate.com\/index.php\/wp-json\/wp\/v2\/comments?post=1352"}],"version-history":[{"count":5,"href":"https:\/\/aimc.skyate.com\/index.php\/wp-json\/wp\/v2\/pages\/1352\/revisions"}],"predecessor-version":[{"id":1359,"href":"https:\/\/aimc.skyate.com\/index.php\/wp-json\/wp\/v2\/pages\/1352\/revisions\/1359"}],"wp:attachment":[{"href":"https:\/\/aimc.skyate.com\/index.php\/wp-json\/wp\/v2\/media?parent=1352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}