Base64编码与解码

<!-- run -->
<style>
        #file-bg {
            background-color: lightskyblue;
            border: 1px solid blue;
            width: 200px;
            height: 200px;
            overflow-y: scroll;
            word-wrap: break-word;
        }
#api {
  width: 250px;
}
    </style>
<h3>Base64编码与解码</h3>
    <textarea name="origin-text" id="origin-text" cols="30" rows="10" placeholder="待编码文本">
        
    </textarea>
    <div style="display: flex;">
        <button id="encode-btn">编码🔽</button>
        <button id="decode-btn">解码🔼</button>
    </div>
    <textarea name="encode-text" id="encode-text" cols="30" rows="10" placeholder="已编码文本">
        
    </textarea>
    <h3>文件转Base64,选择文件或把文件拖到蓝色方块区域内: </h3>
    <div id="file-bg">
        <p id="file-base64-code"></p>
    </div>
    <input type="file" name="select-file" id="file" onchange="selectFile()">
<br>
  <div id="show-base64"></div>
<br><br>
  <div> <b>这例子🌰是采用CDN的方式访问github的json文件,经过验证,不存在跨域问题,其他api就不好说了 </b></div>
  <textarea type="text" name="get-api" id="api" cols="30" rows="10" placeholder="请输入API地址">https://cdn.jsdelivr.net/gh/WangGuibin/ImageBed@main/files/2022_02_08_20:25:35_shuttle.json</textarea>
  <div> <button id="get-data-btn"> XMLHttpRequest GET请求获取数据 </button></div>
<details>
<summary> 展示数据 </summary>
 <div id="show-json">
 </div>
</details>
 
    <script>
        window.onload = function() {
            var encodeBtn = document.getElementById('encode-btn')
            var decodeBtn = document.getElementById('decode-btn')
            var getDataBtn = document.getElementById('get-data-btn')

            encodeBtn.onclick = function() {
                var originText = document.getElementById('origin-text')
                var encodeText = document.getElementById('encode-text')
                encodeText.value = btoa(unescape(encodeURIComponent(originText.value)))
            }
            decodeBtn.onclick = function() {
                var originText = document.getElementById('origin-text')
                var encodeText = document.getElementById('encode-text')
                originText.value = decodeURIComponent(escape(atob(encodeText.value)))
            }

          getDataBtn.onclick = function () {
               var textDom = document.getElementById('api')
               var linkUrl =  encodeURI(textDom.value.trim())
            var xmlhttp = new XMLHttpRequest();
            var type = "GET"; //方法
            xmlhttp.open(type, linkUrl, true); //方法，接口，异步
            xmlhttp.send(); //发送请求
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                    var result = JSON.parse(xmlhttp.response); //获取到的json数据
                     var div = document.getElementById('show-json')
                    div.innerHTML = `  <div class="copyItem" style="position: relative;">
                    <div class="codeType">json</div>
                    <div class="clipboard-button" id="copy_btn_1"  data-clipboard-target="#post_copy_target_1"  title="复制">
                    </div><pre class="language-json" id="post_copy_target_1" highlighted="true">
                    <code  class="language-json" style="font-family: 'mono-font' !important;">${JSON.stringify(result,null,4)}</code></pre></div> `;
                }
            }
          }
        }

        window.addEventListener("dragenter", function(event) {
            event.preventDefault();
        }, false);
        window.addEventListener("dragover", function(event) {
            event.preventDefault();
        }, false);
        window.addEventListener("drop", function(event) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var p = document.getElementById('file-base64-code')
                  p.innerHTML = e.target.result
                var div = document.getElementById('show-base64') 
                div.innerHTML =  ` <div class="copyItem" style="position: relative;">
                    <div class="codeType">base64</div>
                    <div class="clipboard-button" id="copy_btn_3"  data-clipboard-target="#post_copy_target_3"  title="拷贝">
                    </div>
                    <pre class="language-json" id="post_copy_target_3" highlighted="true">
                    <code class="language-json">${e.target.result}</code></pre></div> `;
                
            };
            reader.readAsDataURL(event.dataTransfer.files[0]);
            event.preventDefault();
        }, false);

        function selectFile() {
            var reader = new FileReader();
            reader.onload = function(e) {
                var p = document.getElementById('file-base64-code')
                p.innerHTML = e.target.result
                var div = document.getElementById('show-base64') 
                div.innerHTML =  ` <div class="copyItem" style="position: relative;">
                    <div class="codeType">base64</div>
                    <div class="clipboard-button" id="copy_btn_3"  data-clipboard-target="#post_copy_target_3"  title="拷贝">
                    </div>
                    <pre class="language-json" id="post_copy_target_3" highlighted="true">
                    <code class="language-json">${e.target.result}</code></pre></div> `;
            };
            var file = document.getElementById("file").files[0];
            reader.readAsDataURL(file);
            event.preventDefault();
        }
    </script>