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>