当前位置：首页 > news >正文

base64与图片的转换和预览

news 来源：原创 2025/5/22 14:10:09

新建一个html,然后copy如下代码，保存，然后打开浏览器就能看到如下的样式

页面样式

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>图片预览 &amp; Base64 查看</title><style>:root {--primary: #5c6bc0;--light: #f5f5f5;--dark: #424242;--accent: #ff7043;--radius: 8px;}* {box-sizing: border-box;}body {margin: 0;font-family: "Helvetica Neue", Arial, sans-serif;background-color: var(--light);color: var(--dark);display: flex;justify-content: center;align-items: flex-start;padding: 40px 0;}.container {width: 90%;max-width: 800px;background: #fff;border-radius: var(--radius);box-shadow: 0 4px 16px rgba(0,0,0,0.1);padding: 24px;}h1 {margin-top: 0;text-align: center;color: var(--primary);}.section {margin-bottom: 24px;}.section label {display: block;margin-bottom: 8px;font-weight: bold;}.section input[type="text"],.section textarea {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: var(--radius);font-family: monospace;resize: vertical;background: #fafafa;}.section input[type="file"] {display: block;margin-top: 4px;}.buttons {text-align: center;margin-top: 8px;}.buttons button {background: var(--primary);color: #fff;border: none;padding: 10px 20px;border-radius: var(--radius);cursor: pointer;font-size: 1rem;transition: background 0.3s ease;margin: 0 8px;}.buttons button:hover {background: var(--accent);}#preview {display: block;max-width: 100%;border-radius: var(--radius);margin: 12px auto;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}#base64Output {height: 120px;}</style>
</head>
<body><div class="container"><h1>图片预览 &amp; Base64 查看</h1><div class="section"><label for="base64Input">粘贴 Base64 字符串</label><textarea id="base64Input" placeholder="以 data:image/png;base64,... 开头"></textarea></div><div class="section"><label for="imageInput">或 上传 图片</label><input type="file" id="imageInput" accept="image/*"></div><div class="buttons"><button id="showBtn">显示预览</button><button id="clearBtn" style="background:#999;">清空</button></div><div class="section"><label>图片预览</label><img id="preview" alt="预览图像" style="display:none;"></div><div class="section"><label for="base64Output">对应的 Base64 字符串</label><textarea id="base64Output" readonly placeholder="这里会显示图片的 Base64"></textarea></div></div><script>const base64Input = document.getElementById('base64Input');const imageInput = document.getElementById('imageInput');const preview = document.getElementById('preview');const base64Output = document.getElementById('base64Output');const showBtn = document.getElementById('showBtn');const clearBtn = document.getElementById('clearBtn');function displayPreview() {const b64 = base64Input.value.trim();const file = imageInput.files[0];if (b64) {// 使用粘贴的 Base64preview.src = b64;base64Output.value = b64;preview.style.display = 'block';} else if (file) {// 使用上传的文件，转为 Base64const reader = new FileReader();reader.onload = (e) => {preview.src = e.target.result;base64Output.value = e.target.result;preview.style.display = 'block';};reader.readAsDataURL(file);} else {preview.style.display = 'none';base64Output.value = '';}}function clearAll() {base64Input.value = '';imageInput.value = '';preview.style.display = 'none';base64Output.value = '';}showBtn.addEventListener('click', displayPreview);clearBtn.addEventListener('click', clearAll);// 可选：在粘贴或选图时自动预览base64Input.addEventListener('input', () => {if (base64Input.value.trim()) {displayPreview();}});imageInput.addEventListener('change', displayPreview);</script>
</body>
</html>