base64与图片的转换和预览

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

页面样式

html 复制代码
<!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) {
        // 使用粘贴的 Base64
        preview.src = b64;
        base64Output.value = b64;
        preview.style.display = 'block';
      } else if (file) {
        // 使用上传的文件,转为 Base64
        const 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>
相关推荐
snow@li2 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
Dragonir5 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
aichitang20246 小时前
欧拉拓扑学公式:几何与拓扑的交汇
html·拓扑学
urhero9 小时前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
詩句☾⋆᭄南笙12 小时前
HTML的盒子模型
前端·html·盒子模型
Southern Wind13 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
Shi_haoliu15 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
CoderYanger1 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
CodeCraft Studio1 天前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking111 天前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux