Base64互转

<p style="text-align: center;"><img src="/usr/uploads/2026/01/1867225690.png" style="width: 30%; height: auto;"></p>
<p style="text-align: center; margin: 20px 0;">支持<br>文字转Base<br>base解码<br>图片转base</p>

document.addEventListener('DOMContentLoaded', function() {
        const fileInput = document.getElementById('fileUpload');
        const inputEl = document.getElementById('editText_jiemi');
        const resultEl = document.getElementById('resultArea');
        const copyBtn = document.getElementById('copyResultBtn');
        const progressWrap = document.getElementById('uploadProgressWrap');
        const progressBar = document.getElementById('uploadProgressBar');

// 添加粘贴事件监听，清除格式
        inputEl.addEventListener('paste', function(e) {
            e.preventDefault(); // 阻止默认粘贴行为
            
            let clipboardData = e.clipboardData || window.clipboardData;
            let pastedText = clipboardData.getData('text'); // 获取纯文本内容
            
            // 插入纯文本到光标位置
            insertTextAtCursor(this, pastedText);
        });

fileInput.addEventListener('change', function(e) {
            const file = this.files[0];
            if (!file) return;

if (!file.type.startsWith('image/')) {
                resultEl.style.color = '#dc3545';
                resultEl.style.fontWeight = '500';
                resultEl.innerText = '错误：仅支持上传图片文件，请重新选择';
                this.value = '';
                return;
            }

if (file.size > MAX_FILE_SIZE) {
                resultEl.style.color = '#dc3545';
                resultEl.style.fontWeight = '500';
                resultEl.innerText = `错误：文件大小超过限制！最大支持10MB，当前文件大小约${(file.size / 1024 / 1024).toFixed(2)}MB`;
                this.value = '';
                return;
            }

resultEl.innerHTML = '';
            resultEl.style.color = '';
            resultEl.style.fontWeight = '';
            coreCopyData = '';
            copyBtn.style.display = 'none';
            progressWrap.style.display = 'block';
            progressBar.style.width = '0%';

const reader = new FileReader();

reader.onprogress = function(e) {
                if (e.lengthComputable) {
                    const percent = (e.loaded / e.total) * 100;
                    progressBar.style.width = `${percent}%`;
                }
            };

reader.onload = function(e) {
                const fileBase64 = e.target.result;
                progressWrap.style.display = 'none';
                coreCopyData = fileBase64;
                inputEl.innerText = fileBase64;
                decryptContent();
            };

reader.onerror = function() {
                progressWrap.style.display = 'none';
                resultEl.style.color = '#dc3545';
                resultEl.style.fontWeight = '500';
                resultEl.innerText = `错误：文件「${file.name}」读取失败，请重试`;
                fileInput.value = '';
            };

reader.onabort = function() {
                progressWrap.style.display = 'none';
                resultEl.style.color = '#dc3545';
                resultEl.style.fontWeight = '500';
                resultEl.innerText = `错误：文件「${file.name}」读取被中断`;
                fileInput.value = '';
            };

reader.readAsDataURL(file);
        });
    });

// 插入文本到光标位置的辅助函数
    function insertTextAtCursor(element, text) {
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            range.deleteContents(); // 删除选中的内容（如果有）
            
            // 创建文本节点并插入
            const textNode = document.createTextNode(text);
            range.insertNode(textNode);
            
            // 移动光标到插入文本的末尾
            range.setStartAfter(textNode);
            range.setEndAfter(textNode);
            selection.removeAllRanges();
            selection.addRange(range);
            
            // 触发input事件，确保内容更新
            element.dispatchEvent(new Event('input', { bubbles: true }));
        } else {
            // 如果没有选中范围，直接添加到末尾
            element.innerText += text;
        }
    }

function copyCoreData() {
        if (!coreCopyData || coreCopyData.trim() === '') {
            alert('无有效数据可复制！');
            return;
        }

try {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(coreCopyData).then(function() {
                    alert('复制成功！');
                }).catch(function(err) {
                    throw new Error('剪贴板API调用失败，切换兼容模式');
                });
            } else {
                const tempTextarea = document.createElement('textarea');
                tempTextarea.style.position = 'fixed';
                tempTextarea.style.top = '-9999px';
                tempTextarea.style.left = '-9999px';
                tempTextarea.value = coreCopyData;
                document.body.appendChild(tempTextarea);
                tempTextarea.focus();
                tempTextarea.select();
                tempTextarea.setSelectionRange(0, coreCopyData.length);
                const copySuccess = document.execCommand('copy');
                if (copySuccess) {
                    alert('复制成功！');
                } else {
                    throw new Error('复制失败，请手动复制');
                }
                document.body.removeChild(tempTextarea);
            }
        } catch (error) {
            alert(`复制失败：${error.message}\n数据：${coreCopyData.substring(0, 50)}...`);
        }
    }

function decryptContent() {
        const inputEl = document.getElementById('editText_jiemi');
        let inputStr = inputEl.innerText.trim(); // 使用innerText确保获取纯文本
        const resultEl = document.getElementById('resultArea');
        const copyBtn = document.getElementById('copyResultBtn');

resultEl.innerHTML = '';
        resultEl.style.color = '';
        resultEl.style.fontWeight = '';
        coreCopyData = '';
        copyBtn.style.display = 'none';

if (!inputStr) {
            resultEl.style.color = '#dc3545';
            resultEl.style.fontWeight = '500';
            resultEl.innerText = '错误：请输入有效的内容（文字或Base64数据）';
            return;
        }

try {
            let contentType = '';
            let pureBase64 = '';
            const dataUriRegex = /^data:([^;]+);base64,(.*)$/;
            const matchResult = inputStr.match(dataUriRegex);

if (matchResult) {
                contentType = matchResult[1];
                pureBase64 = matchResult[2];
            } else {
                pureBase64 = inputStr;
            }

if (isValidBase64(pureBase64)) {
                coreCopyData = inputStr;
                copyBtn.style.display = 'inline-block';

if (matchResult) {
                    const element = document.createElement(
                        contentType.startsWith('image/') ? 'img' : 
                        'div'
                    );
                    
                    if (contentType.startsWith('image/')) {
                        element.src = `data:${contentType};base64,${pureBase64}`;
                        element.alt = '解析后的内容';
                        element.style = 'max-width:100%;max-height:600px;margin-top:10px;border-radius:4px;display: inline-block;';
                        element.onerror = () => {
                            throw new Error(`无法解析为【${contentType}】类型内容`);
                        };
                    } else {
                        const textContent = decodeBase64ToText(pureBase64);
                        element.innerText = textContent;
                        element.style = 'margin-top:10px;word-break: break-all;display: inline-block;';
                    }
                    resultEl.appendChild(element);
                } else {
                    const textContent = decodeBase64ToText(pureBase64);
                    if (isPrintableText(textContent)) {
                        coreCopyData = textContent;
                        copyBtn.style.display = 'inline-block';
                        const div = document.createElement('div');
                        div.innerText = textContent;
                        div.style = 'margin-top:10px;word-break: break-all;display: inline-block;';
                        resultEl.appendChild(div);
                    } else {
                        throw new Error('纯Base64数据无法解析为可打印文字，请检查数据格式');
                    }
                }
            } else {
                const encodedBase64 = encodeTextToBase64(inputStr);
                coreCopyData = encodedBase64;
                copyBtn.style.display = 'inline-block';
                const div = document.createElement('div');
                div.innerText = encodedBase64;
                div.style = 'margin-top:10px;word-break: break-all;display: inline-block;';
                resultEl.appendChild(div);
            }
        } catch (error) {
            resultEl.style.color = '#dc3545';
            resultEl.style.fontWeight = '500';
            resultEl.innerText = `错误：${error.message}`;
        }
    }

function isValidBase64(str) {
        const base64Regex = /^[A-Za-z0-9+/]+={0,2}$/;
        return base64Regex.test(str) && str.length % 4 === 0;
    }

function encodeTextToBase64(text) {
        const encoder = new TextEncoder('utf-8');
        const uint8Array = encoder.encode(text);
        let binaryStr = '';
        for (let i = 0; i < uint8Array.length; i++) {
            binaryStr += String.fromCharCode(uint8Array[i]);
        }
        return btoa(binaryStr);
    }

function clearDecryptContent() {
        const inputEl = document.getElementById('editText_jiemi');
        const fileInput = document.getElementById('fileUpload');
        const resultEl = document.getElementById('resultArea');
        const copyBtn = document.getElementById('copyResultBtn');
        const progressWrap = document.getElementById('uploadProgressWrap');
        const progressBar = document.getElementById('uploadProgressBar');
        
        inputEl.innerText = '';
        fileInput.value = '';
        resultEl.innerHTML = '';
        resultEl.style.color = '';
        resultEl.style.fontWeight = '';
        coreCopyData = '';
        copyBtn.style.display = 'none';
        progressWrap.style.display = 'none';
        progressBar.style.width = '0%';
    }
</script>

支持
文字转Base
base解码
图片转base

📤 上传图片(≤10MB)

Last modification：January 10, 2026

如果觉得我的文章对你有用，请随意赞赏