将文本转换成Base64,或将Base64转换成文本

chenyajun  2022-10-16 13:19:58  阅读 1306 次 评论 0 条
<html>    <head>    <meta charset="utf-8">    <title>Base64 En /译码器</title>    <script type="text/javascript">    
            const encode = text => {    
                return btoa(unescape(encodeURIComponent(text)));    
            };    
            const decode = base64 => {    
                return decodeURIComponent(escape(atob(base64)));    
            };    
            const copyForm = id => {    
                const ele = document.getElementById(id);    
                ele.select();    
                document.execCommand("copy");    
            };    
            const exportBase64 = () => {    
                const text = document.getElementById("text").value;    
                const base64 = encode(text)    
                const base64Form = document.getElementById("base64");    
                base64Form.value = base64;    
            };    
            const exportText = () => {    
                const base64 = document.getElementById("base64").value;    
                const text = decode(base64)    
                const textForm = document.getElementById("text");    
                textForm.value = text;    
            };    
        </script>    <style type="text/css">    
            body {    
                background-color: #252C31;    
            }    
            div.main {    
                height: 100%;    
                max-width: 700px;    
                margin-left: auto;    
                margin-right: auto;    
            }    
            div.text {    
                position: relative;    
                height: 47%;    
            }    
            div.buttons {    
                height: 6%;    
                display: flex;    
                justify-content: space-between;    
            }    
            textarea {    
                font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;    
                font-size: 16px;    
                line-height: 140%;    
                border-style: none;    
                width: 100%;    
                height: 100%;    
                resize: none;    
                color: navajowhite;    
                background-color: #303C45;    
                padding: 15px;    
            }    
            button {    
                margin: 5px;    
                width: 3em;    
                font-size: 16px;    
                position: relative;    
                display: inline-block;    
                text-decoration: none;    
                background: #303C45;    
                color: navajowhite;    
                font-weight: bold;    
                border-radius: 2px;    
            }    
            button.convert {    
                font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;    
                border: none;    
            }    
            button.convert:active {    
                margin-top: 8px;    
                margin-bottom: 8px;    
            }    
            button.decode {    
                margin-left: 10vw;    
            }    
            button.encode {    
                margin-right: 10vw;    
            }    
            button.copy {    
                height: 2em;    
                width: 5em;    
                position: absolute;    
                right: 10px;    
                bottom: 10px;    
                border: solid 2px navajowhite;    
            }    
            button.copy:active {    
                height: 1.8em;    
            }    
            button:hover {    
                background-color: navajowhite;    
                border-color: navajowhite;    
                color: #303C45;    
            }    
        </style>    
	</head>    <body>    <div class="main">    <div class="text">    <textarea id="text" placeholder="请在这里输入要转换成Base64的文本" spellcheck="false"    onkeydown="((e) => {if (e.ctrlKey && e.key == 'Enter') exportBase64()})(event)"></textarea>    <button class="copy" onclick="copy('text')">复制</button>    </div>    <div class="buttons">    <button class="decode convert" title="Decode" onclick="exportText()">↑</button>    <button class="encode convert" title="Encode" onclick="exportBase64()">↓</button>    </div>    <div class="text">    <textarea id="base64" placeholder="这里输出转换成Base64的字符串" spellcheck="false"    onkeydown="((e) => {if (e.ctrlKey && e.key == 'Enter') exportText()})(event)"></textarea>    <button class="copy" onclick="copyForm('base64')">复制</button>    </div>    </div>    </body>    </html>


本文地址:http://chenyajun.net/index.php/post/91.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!