<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>长图切割工具</title>
  <style>
    :root {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      color-scheme: dark;
    }
    body { margin: 0; background: #0b0c10; color: #eaf0ff; }
    header {
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      position: sticky; top: 0;
      background: rgba(11,12,16,.9);
      backdrop-filter: blur(8px);
      z-index: 10;
    }
    header h1 { font-size: 16px; margin: 0 0 6px; font-weight: 650; }
    header p { margin: 0; opacity: .8; font-size: 12px; line-height: 1.45; }
    main { padding: 16px 18px; max-width: 1180px; margin: 0 auto; }

    .row { display: grid; grid-template-columns: 380px 1fr; gap: 14px; align-items: start; }
    @media (max-width: 980px){ .row { grid-template-columns: 1fr; } }

    .card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; }
    .card .hd { padding: 12px 12px 10px; border-bottom: 1px solid rgba(255,255,255,.08); display:flex; gap: 10px; align-items:center; justify-content: space-between; }
    .card .hd strong { font-size: 13px; }
    .card .bd { padding: 12px; }

    label { display:block; font-size: 12px; opacity: .85; margin: 10px 0 6px; }
    input[type="number"], input[type="text"], select, textarea {
      width: 100%;
      box-sizing: border-box;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.25);
      color: #eaf0ff;
      padding: 10px 10px;
      outline: none;
      font-size: 12px;
    }
    textarea { min-height: 190px; resize: vertical; line-height: 1.45; }
    input[type="file"] { width: 100%; }

    .btns { display:flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    button {
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: #eaf0ff;
      padding: 9px 10px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 12px;
      user-select: none;
    }
    button.primary { background: rgba(90,141,255,.18); border-color: rgba(90,141,255,.5); }
    button.danger { background: rgba(255,90,90,.14); border-color: rgba(255,90,90,.35); }
    button:disabled { opacity: .45; cursor: not-allowed; }

    .hint { font-size: 12px; opacity: .82; margin-top: 10px; line-height: 1.55; }
    .muted { opacity: .72; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 11px; }

    .drop {
      border: 1px dashed rgba(255,255,255,.18);
      border-radius: 12px;
      padding: 12px;
      background: rgba(0,0,0,.18);
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.5;
    }
    .drop.drag { border-color: rgba(90,141,255,.7); background: rgba(90,141,255,.10); }

    .seg {
      display: inline-flex;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      overflow: hidden;
      background: rgba(0,0,0,.22);
    }
    .seg button {
      border: 0;
      border-right: 1px solid rgba(255,255,255,.12);
      border-radius: 0;
      padding: 7px 10px;
      background: transparent;
    }
    .seg button:last-child { border-right: 0; }
    .seg button.active { background: rgba(90,141,255,.18); }

    .two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .three { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
    @media (max-width: 520px){ .two, .three { grid-template-columns: 1fr; } }

    .grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
    .slice { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; }
    .slice .meta { padding: 10px 10px 8px; display:flex; align-items:center; justify-content: space-between; gap: 10px; }
    .slice .meta small { opacity: .75; font-size: 11px; }
    .slice .actions { display:flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .slice img { width: 100%; display:block; background: #0f1117; }

    .previewWrap {
      margin-top: 10px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(0,0,0,.18);
    }
    .previewHd {
      padding: 8px 10px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      display:flex; justify-content: space-between; gap: 10px;
      font-size: 12px;
      opacity: .9;
      align-items: center;
    }
    .previewBd { padding: 10px; }
    .previewBox {
      border-radius: 10px;
      overflow: auto;
      max-height: 240px;
      background: #ffffff;
      color: #111827;
      border: 1px solid rgba(0,0,0,.08);
    }

    .toast {
      position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
      background: rgba(20,20,24,.92);
      border: 1px solid rgba(255,255,255,.14);
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
      z-index: 1000;
      max-width: min(680px, calc(100vw - 24px));
      text-wrap: balance;
    }
    .toast.show { opacity: 1; }

    /* 文本渲染样式（用于预览） */
    .renderRoot {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.6;
      font-size: 16px;
      padding: 24px;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .renderRoot h1, .renderRoot h2, .renderRoot h3 { margin: 0.6em 0 0.35em; line-height: 1.25; }
    .renderRoot h1 { font-size: 1.55em; }
    .renderRoot h2 { font-size: 1.32em; }
    .renderRoot h3 { font-size: 1.15em; }
    .renderRoot p { margin: 0.55em 0; }
    .renderRoot ul, .renderRoot ol { margin: 0.55em 0 0.55em 1.2em; padding: 0; }
    .renderRoot li { margin: 0.18em 0; }
    .renderRoot blockquote {
      margin: 0.7em 0;
      padding: 0.55em 0.85em;
      border-left: 4px solid rgba(0,0,0,.18);
      background: rgba(0,0,0,.04);
      border-radius: 10px;
    }
    .renderRoot code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: .95em;
      background: rgba(0,0,0,.06);
      padding: 0.12em 0.35em;
      border-radius: 8px;
    }
    .renderRoot pre {
      margin: 0.75em 0;
      padding: 0.75em 0.85em;
      background: rgba(0,0,0,.06);
      border-radius: 12px;
      overflow: auto;
    }
    .renderRoot pre code { background: transparent; padding: 0; }
    .renderRoot a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
    .renderRoot hr { border: 0; border-top: 1px solid rgba(0,0,0,.14); margin: 0.9em 0; }
    .renderRoot img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 0.6em 0; }

    /* 隐藏测量容器 */
    #measureHost {
      position: fixed;
      left: -10000px;
      top: -10000px;
      opacity: 0;
      pointer-events: none;
      z-index: -1;
    }
  </style>
</head>

<body>
<header>
  <h1>长图一键切割</h1>
  <p>
    <!-- 推荐用 <span class="mono">http://localhost</span> 或 HTTPS 打开（复制到剪贴板需要安全上下文）。 -->
    <b>直接 Ctrl+V：</b>粘贴图片会进入图片模式；粘贴文字会进入文字模式。
  </p>
</header>

<main>
  <div class="row">
    <!-- 左侧：输入与设置 -->
    <div class="card">
      <div class="hd">
        <strong>输入与切割设置</strong>
        <span class="muted" id="fileInfo">未输入</span>
      </div>
      <div class="bd">
        <div style="display:flex; gap:10px; align-items:center; justify-content: space-between;">
          <div class="seg" role="tablist" aria-label="输入模式">
            <button id="modeImage" class="active" type="button" aria-selected="true">图片</button>
            <button id="modeText" type="button" aria-selected="false">文字</button>
          </div>
          <span class="muted" style="font-size:12px;">提示：粘贴/拖拽都可以</span>
        </div>

        <!-- 图片输入区 -->
        <div id="imagePanel">
          <label>选择图片（PNG/JPG/WebP）</label>
          <input type="file" id="imageFile" accept="image/*" />

          <div class="drop" id="dropZone">
            <div><b>也可以：</b>把图片拖到这里</div>
            <div class="muted">或在页面内直接粘贴图片（Ctrl+V）</div>
          </div>
        </div>

        <!-- 文字输入区 -->
        <div id="textPanel" style="display:none;">
          <label>粘贴/输入文字</label>
          <textarea id="textInput" placeholder="在这里粘贴文字（支持 Markdown / BBCode / 纯文本）&#10;示例：&#10;# 标题&#10;- 列表项&#10;**加粗** 以及 [链接](https://example.com)&#10;&#10;BBCode 示例：&#10;[b]加粗[/b] [quote]引用[/quote]"></textarea>

          <div class="two">
            <div>
              <label>文本格式</label>
              <select id="textFormat">
                <option value="markdown" selected>Markdown</option>
                <option value="bbcode">BBCode</option>
                <option value="plain">纯文本</option>
              </select>
            </div>
            <div>
              <label>主题（导出背景/文字色）</label>
              <select id="textTheme">
                <option value="light" selected>浅色（白底黑字）</option>
                <option value="dark">深色（黑底白字）</option>
                <option value="transparent">透明背景（PNG 推荐）</option>
              </select>
            </div>
          </div>

          <div class="three">
            <div>
              <label>字体大小（px）</label>
              <input type="number" id="textFontSize" min="12" max="28" value="16" />
            </div>
            <div>
              <label>行高</label>
              <input type="text" id="textLineHeight" value="1.6" />
            </div>
            <div>
              <label>内边距（px）</label>
              <input type="number" id="textPadding" min="0" max="80" value="24" />
            </div>
          </div>

          <div class="previewWrap">
            <div class="previewHd">
              <span>预览（按当前宽度渲染）</span>
              <span class="muted" id="previewInfo">—</span>
            </div>
            <div class="previewBd">
              <div id="previewBox" class="previewBox">
                <div id="previewRender" class="renderRoot"></div>
              </div>
            </div>
          </div>

          <div class="hint muted" style="margin-top:10px;">
            注意：文字里如果包含外链图片（Markdown/BBCode 的 img），可能因跨域导致导出失败；本工具会自动降级为“占位框”避免 taint。
          </div>
        </div>

        <div class="two" style="margin-top: 10px;">
          <div>
            <label>目标等宽（px）</label>
            <input type="number" id="targetWidth" min="200" max="8192" value="500" />
          </div>
          <div>
            <label>切片高度（px）</label>
            <input type="number" id="sliceHeight" min="200" max="8000" value="500" />
          </div>
        </div>

        <div class="two">
          <div>
            <label>重叠（px，避免文字被切断）</label>
            <input type="number" id="overlap" min="0" max="800" value="30" />
          </div>
          <div>
            <label>导出格式</label>
            <select id="outFormat">
              <option value="image/png" selected>PNG（清晰）</option>
              <option value="image/jpeg">JPG（更小，轻微压缩）</option>
            </select>
          </div>
        </div>

        <div class="btns">
          <button class="primary" id="btnGenerate">生成切片</button>
          <button id="btnZip" disabled>下载 ZIP</button>
          <button class="danger" id="btnClear" disabled>清空</button>
        </div>

        <div class="hint">
          <div>✅ 支持：<b>粘贴图片</b> 或 <b>粘贴文字（Markdown/BBCode）</b> → 一键切割。</div>
          <div>✅ 单张复制：生成后在右侧每张图点“复制”。</div>
          <!-- <div>⚠️ 若你是 Safari：会自动走 Canvas 降级渲染</div> -->
        </div>
      </div>
    </div>

    <!-- 右侧：结果 -->
    <div class="card">
      <div class="hd">
        <strong>切割结果</strong>
        <span class="muted" id="status">等待输入…</span>
      </div>
      <div class="bd">
        <div id="result" class="grid"></div>
      </div>
    </div>
  </div>
</main>

<div id="toast" class="toast"></div>
<div id="measureHost"></div>

<script>
  // =========================
  //  小工具
  // =========================
  const $ = (sel) => document.querySelector(sel);

  const toastEl = $("#toast");
  let toastTimer = null;
  function toast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => toastEl.classList.remove("show"), 2400);
  }

  const clamp = (n, a, b) => Math.max(a, Math.min(b, n));
  const TARGET_WIDTH_MIN = 200;
  const TARGET_WIDTH_MAX = 8192;
  const TARGET_WIDTH_DEFAULT = 500;
  const getTargetWidth = () => clamp(
    parseInt($("#targetWidth").value, 10) || TARGET_WIDTH_DEFAULT,
    TARGET_WIDTH_MIN,
    TARGET_WIDTH_MAX
  );
  const nextFrame = () => new Promise(r => requestAnimationFrame(() => r()));
  const sleep = (ms) => new Promise(r => setTimeout(r, ms));

  function setStatus(msg){ $("#status").textContent = msg; }
  function setFileInfo(msg){ $("#fileInfo").textContent = msg; }

  async function canvasToBlob(canvas, mime) {
    const quality = (mime === "image/jpeg") ? 0.92 : undefined;
    return new Promise((resolve) => canvas.toBlob(resolve, mime, quality));
  }

  // =========================
  //  ZIP（store 不压缩）
  // =========================
  const CRC32_TABLE = (() => {
    const table = new Uint32Array(256);
    for (let i = 0; i < 256; i++) {
      let c = i;
      for (let k = 0; k < 8; k++) c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1);
      table[i] = c >>> 0;
    }
    return table;
  })();

  function crc32(u8) {
    let c = 0xFFFFFFFF;
    for (let i = 0; i < u8.length; i++) c = CRC32_TABLE[(c ^ u8[i]) & 0xFF] ^ (c >>> 8);
    return (c ^ 0xFFFFFFFF) >>> 0;
  }

  function dosTimeDate(date) {
    const d = date || new Date();
    const time =
      ((d.getHours() & 0x1F) << 11) |
      ((d.getMinutes() & 0x3F) << 5) |
      ((Math.floor(d.getSeconds() / 2) & 0x1F));
    const year = d.getFullYear();
    const dosYear = clamp(year - 1980, 0, 127);
    const datePart =
      ((dosYear & 0x7F) << 9) |
      (((d.getMonth() + 1) & 0x0F) << 5) |
      (d.getDate() & 0x1F);
    return { time, date: datePart };
  }

  function concatU8(parts){
    let total = 0;
    for (const p of parts) total += p.length;
    const out = new Uint8Array(total);
    let off = 0;
    for (const p of parts) { out.set(p, off); off += p.length; }
    return out;
  }

  async function makeZip(files) {
    // files: [{name, blob}]
    const chunks = [];
    let offset = 0;
    const central = [];
    let centralSize = 0;
    const dt = dosTimeDate(new Date());
    const enc = new TextEncoder();

    const pushU16 = (v) => {
      const dv = new DataView(new ArrayBuffer(2));
      dv.setUint16(0, v, true);
      chunks.push(new Uint8Array(dv.buffer));
      offset += 2;
    };
    const pushU32 = (v) => {
      const dv = new DataView(new ArrayBuffer(4));
      dv.setUint32(0, v, true);
      chunks.push(new Uint8Array(dv.buffer));
      offset += 4;
    };
    const pushBytes = (u8) => { chunks.push(u8); offset += u8.length; };

    for (let i = 0; i < files.length; i++) {
      const { name, blob } = files[i];
      const fname = enc.encode(name);
      const data = new Uint8Array(await blob.arrayBuffer());
      const c = crc32(data);
      const size = data.length >>> 0;
      const localHeaderOffset = offset;

      // Local header
      pushU32(0x04034b50);
      pushU16(20);
      pushU16(0);
      pushU16(0); // store
      pushU16(dt.time);
      pushU16(dt.date);
      pushU32(c);
      pushU32(size);
      pushU32(size);
      pushU16(fname.length);
      pushU16(0);
      pushBytes(fname);
      pushBytes(data);

      // Central directory entry
      const cd = [];
      const cdU16 = (v) => { const dv = new DataView(new ArrayBuffer(2)); dv.setUint16(0, v, true); cd.push(new Uint8Array(dv.buffer)); };
      const cdU32 = (v) => { const dv = new DataView(new ArrayBuffer(4)); dv.setUint32(0, v, true); cd.push(new Uint8Array(dv.buffer)); };

      cdU32(0x02014b50);
      cdU16(20); cdU16(20);
      cdU16(0);
      cdU16(0);
      cdU16(dt.time);
      cdU16(dt.date);
      cdU32(c);
      cdU32(size);
      cdU32(size);
      cdU16(fname.length);
      cdU16(0);
      cdU16(0);
      cdU16(0);
      cdU16(0);
      cdU32(0);
      cdU32(localHeaderOffset);
      cd.push(fname);

      const cdBlob = concatU8(cd);
      central.push(cdBlob);
      centralSize += cdBlob.length;

      if ((i + 1) % 6 === 0) await nextFrame();
    }

    const centralOffset = offset;
    chunks.push(...central);
    offset += centralSize;

    // EOCD
    const eocd = [];
    const eU16 = (v) => { const dv = new DataView(new ArrayBuffer(2)); dv.setUint16(0, v, true); eocd.push(new Uint8Array(dv.buffer)); };
    const eU32 = (v) => { const dv = new DataView(new ArrayBuffer(4)); dv.setUint32(0, v, true); eocd.push(new Uint8Array(dv.buffer)); };

    eU32(0x06054b50);
    eU16(0); eU16(0);
    eU16(files.length);
    eU16(files.length);
    eU32(centralSize);
    eU32(centralOffset);
    eU16(0);

    const zipU8 = concatU8([...chunks, ...eocd]);
    return new Blob([zipU8], { type: "application/zip" });
  }

  // =========================
  //  状态
  // =========================
  const state = {
    mode: "image",        // image | text
    imageFile: null,
    imageName: "",
    slices: [],           // { blob, url, w, h, name, srcX, srcY, srcW, srcH, copyBlob, copyW, copyH }
    bitmap: null,         // ImageBitmap / HTMLImageElement / HTMLCanvasElement
  };

  function setButtons(){
    const hasSlices = state.slices.length > 0;
    const hasInput =
      (state.mode === "image" && !!state.imageFile) ||
      (state.mode === "text" && ($("#textInput").value.trim().length > 0));

    $("#btnZip").disabled = !hasSlices;
    $("#btnClear").disabled = !(hasSlices || hasInput);
  }

  function clearSlices(){
    for (const s of state.slices) URL.revokeObjectURL(s.url);
    state.slices = [];
    $("#result").innerHTML = "";
  }

  async function clearAll(){
    clearSlices();
    state.imageFile = null;
    state.imageName = "";
    state.bitmap = null;
    $("#imageFile").value = "";
    $("#textInput").value = "";
    setFileInfo("未输入");
    setStatus("已清空。");
    updatePreview();
    setButtons();
  }

  // =========================
  //  模式切换
  // =========================
  function setMode(mode){
    state.mode = mode;

    const imgBtn = $("#modeImage");
    const txtBtn = $("#modeText");
    const imgPanel = $("#imagePanel");
    const txtPanel = $("#textPanel");

    const isImg = mode === "image";
    imgBtn.classList.toggle("active", isImg);
    txtBtn.classList.toggle("active", !isImg);
    imgBtn.setAttribute("aria-selected", String(isImg));
    txtBtn.setAttribute("aria-selected", String(!isImg));

    imgPanel.style.display = isImg ? "" : "none";
    txtPanel.style.display = isImg ? "none" : "";

    if (isImg) {
      setFileInfo(state.imageFile ? state.imageName : "未选择图片");
      setStatus(state.imageFile ? "已选择图片，等待生成…" : "等待输入…");
    } else {
      const t = $("#textInput").value.trim();
      setFileInfo(t ? `文字（${t.length} 字符）` : "未输入文字");
      setStatus(t ? "已输入文字，等待生成…" : "等待输入…");
      updatePreview();
    }

    setButtons();
  }

  $("#modeImage").addEventListener("click", () => setMode("image"));
  $("#modeText").addEventListener("click", () => setMode("text"));

  // =========================
  //  读图：优先 createImageBitmap（含方向）
  // =========================
  function loadImageElementFromFile(file){
    return new Promise((resolve, reject) => {
      const url = URL.createObjectURL(file);
      const img = new Image();
      img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
      img.onerror = (err) => { URL.revokeObjectURL(url); reject(err); };
      img.src = url;
    });
  }

  async function loadBitmap(file){
    if ("createImageBitmap" in window) {
      try {
        return await createImageBitmap(file, { imageOrientation: "from-image" });
      } catch (e) {
        try { return await createImageBitmap(file); } catch (e2) {}
      }
    }
    return await loadImageElementFromFile(file);
  }

  function getWH(bitmap){
    const w = bitmap.width ?? bitmap.naturalWidth;
    const h = bitmap.height ?? bitmap.naturalHeight;
    return { w, h };
  }

  async function syncTargetWidthToSource(file){
    if (!file) return;

    const targetInput = $("#targetWidth");
    if (!targetInput) return;

    try {
      const bitmap = await loadBitmap(file);
      const { w: srcW } = getWH(bitmap);

      const maxW = clamp(parseInt(targetInput.max, 10) || TARGET_WIDTH_MAX, TARGET_WIDTH_MIN, TARGET_WIDTH_MAX);
      const nextW = clamp(Math.round(srcW) || TARGET_WIDTH_DEFAULT, TARGET_WIDTH_MIN, maxW);
      targetInput.value = String(nextW);

      if (typeof bitmap.close === "function") bitmap.close();

      if (state.mode === "image" && state.imageFile === file) {
        setStatus(`已选择图片，目标等宽已自动设为 ${nextW}px（可手动调整）`);
      }
    } catch (err) {
      console.warn("syncTargetWidthToSource failed:", err);
    }
  }

  // =========================
  //  生成切片（不创建整张缩放大画布）
  // =========================
  async function generateSlices(bitmap, baseName){
    const targetW = getTargetWidth();
    const sliceH  = clamp(parseInt($("#sliceHeight").value, 10) || 500, 200, 8000);
    const overlap = clamp(parseInt($("#overlap").value, 10) || 0, 0, Math.floor(sliceH / 2));
    const outMime = $("#outFormat").value || "image/png";
    const ext = (outMime === "image/jpeg") ? "jpg" : "png";

    const { w: srcW, h: srcH } = getWH(bitmap);
    const scale = targetW / srcW;
    const scaledH = Math.max(1, Math.round(srcH * scale));
    const step = Math.max(1, sliceH - overlap);

    const safeBase = (baseName || "image")
      .replace(/\.[^.]+$/, "")
      .replace(/[^\w\-]+/g, "_")
      .slice(0, 40) || "image";

    const slices = [];
    let idx = 1;

    for (let y = 0; y < scaledH; y += step) {
      const h = Math.min(sliceH, scaledH - y);

      const c = document.createElement("canvas");
      c.width = targetW;
      c.height = h;

      const ctx = c.getContext("2d", { alpha: outMime !== "image/jpeg" });
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = "high";

      if (outMime === "image/jpeg") {
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, c.width, c.height);
      }

      const sy = y / scale;
      const sh = h / scale;

      const syClamped = clamp(sy, 0, srcH);
      const shClamped = clamp(sh, 0, srcH - syClamped);

      ctx.drawImage(
        bitmap,
        0, syClamped, srcW, shClamped,
        0, 0, targetW, h
      );

      const blob = await canvasToBlob(c, outMime);
      const url = URL.createObjectURL(blob);

      slices.push({
        blob, url, w: targetW, h,
        srcX: 0,
        srcY: syClamped,
        srcW,
        srcH: shClamped,
        copyBlob: null,
        copyW: targetW,
        copyH: h,
        name: `${safeBase}_slice_${String(idx).padStart(3, "0")}.${ext}`
      });

      c.width = 0; c.height = 0;

      idx++;
      if (idx % 5 === 0) await nextFrame();
    }

    return { slices, scaledH, srcW, srcH, targetW };
  }

  function clipboardTypeSupported(type){
    if (typeof ClipboardItem === "undefined") return false;
    if (typeof ClipboardItem.supports !== "function") return true;
    return ClipboardItem.supports(type);
  }

  async function buildHiResCopyBlob(slice){
    if (!slice) return null;

    const source = state.bitmap;
    if (!source) {
      slice.copyW = slice.w;
      slice.copyH = slice.h;
      return slice.blob;
    }

    const { w: sourceW, h: sourceH } = getWH(source);
    const sx = clamp(slice.srcX ?? 0, 0, Math.max(0, sourceW - 1));
    const sy = clamp(slice.srcY ?? 0, 0, Math.max(0, sourceH - 1));
    const sw = clamp(slice.srcW ?? sourceW, 1, Math.max(1, sourceW - sx));
    const sh = clamp(slice.srcH ?? sourceH, 1, Math.max(1, sourceH - sy));
    const outW = Math.max(1, Math.round(sw));
    const outH = Math.max(1, Math.round(sh));

    if (outW <= slice.w && outH <= slice.h && slice.blob?.type === "image/png") {
      slice.copyW = slice.w;
      slice.copyH = slice.h;
      return slice.blob;
    }

    const canvas = document.createElement("canvas");
    canvas.width = outW;
    canvas.height = outH;
    const ctx = canvas.getContext("2d", { alpha: true });
    if (!ctx) {
      slice.copyW = slice.w;
      slice.copyH = slice.h;
      return slice.blob;
    }

    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = "high";
    ctx.drawImage(source, sx, sy, sw, sh, 0, 0, outW, outH);

    const blob = await canvasToBlob(canvas, "image/png");
    canvas.width = 0;
    canvas.height = 0;

    if (!blob) {
      slice.copyW = slice.w;
      slice.copyH = slice.h;
      return slice.blob;
    }

    slice.copyW = outW;
    slice.copyH = outH;
    return blob;
  }

  async function getCopyBlob(slice){
    if (!slice) return null;
    if (slice.copyBlob) return slice.copyBlob;
    slice.copyBlob = await buildHiResCopyBlob(slice);
    return slice.copyBlob || slice.blob;
  }

  // =========================
  //  展示结果
  // =========================
  function renderSlices(){
    const root = $("#result");
    root.innerHTML = "";
    state.slices.forEach((s, i) => {
      const el = document.createElement("div");
      el.className = "slice";
      el.innerHTML = `
        <div class="meta">
          <small>#${i+1} · ${s.w}×${s.h}</small>
          <div class="actions">
            <button data-act="copy" data-i="${i}" type="button">复制</button>
            <button data-act="download" data-i="${i}" type="button">下载</button>
          </div>
        </div>
        <img src="${s.url}" alt="slice ${i+1}" />
      `;
      root.appendChild(el);
    });
  }

  $("#result").addEventListener("click", async (e) => {
    const btn = e.target.closest("button[data-act]");
    if (!btn) return;

    const act = btn.dataset.act;
    const i = parseInt(btn.dataset.i, 10);
    const s = state.slices[i];
    if (!s) return;

    if (act === "download") {
      const a = document.createElement("a");
      a.href = s.url;
      a.download = s.name;
      document.body.appendChild(a);
      a.click();
      a.remove();
      toast("已开始下载：" + s.name);
      return;
    }

    if (act === "copy") {
      try {
        if (!navigator.clipboard?.write) throw new Error("clipboard.write not supported");
        const hiResBlob = await getCopyBlob(s);
        const copyBlob = (hiResBlob && clipboardTypeSupported(hiResBlob.type)) ? hiResBlob : s.blob;
        if (!copyBlob) throw new Error("copy blob unavailable");

        await navigator.clipboard.write([ new ClipboardItem({ [copyBlob.type]: copyBlob }) ]);
        toast("已复制高清图片到剪贴板（可直接 Ctrl+V 粘贴）");
      } catch (err) {
        console.error(err);
        toast("复制失败：请用 localhost/HTTPS 打开，或直接下载 ZIP（最稳）");
      }
    }
  });

  // =========================
  //  输入：图片（选择/拖拽/粘贴）
  // =========================
  function setImageFile(file){
    state.imageFile = file || null;
    state.imageName = file?.name || "";
    clearSlices();

    if (file) {
      setMode("image");
      setFileInfo(file.name);
      setStatus("已选择图片，等待生成…");
      void syncTargetWidthToSource(file);
    } else {
      if (state.mode === "image") {
        setFileInfo("未选择图片");
        setStatus("等待输入…");
      }
    }
    setButtons();
  }

  $("#imageFile").addEventListener("change", (e) => {
    const file = e.target.files && e.target.files[0];
    setImageFile(file || null);
  });

  const drop = $("#dropZone");
  ["dragenter", "dragover"].forEach(evt => {
    drop.addEventListener(evt, (e) => {
      e.preventDefault();
      drop.classList.add("drag");
    });
  });
  ["dragleave", "drop"].forEach(evt => {
    drop.addEventListener(evt, (e) => {
      e.preventDefault();
      drop.classList.remove("drag");
    });
  });
  drop.addEventListener("drop", (e) => {
    const file = e.dataTransfer?.files?.[0];
    if (file && file.type.startsWith("image/")) {
      setImageFile(file);
      toast("已拖入图片：" + file.name);
    } else {
      toast("拖进来的不是图片文件");
    }
  });

  // =========================
  //  文本：Markdown / BBCode（轻量实现）
  // =========================
  const escapeHtml = (s) =>
    String(s)
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#39;");

  function inlineMd(s){
    s = s.replace(/!\[([^\]]*?)\]\((.+?)\)/g, (m, alt, url) => {
      const u = escapeHtml(url).replaceAll("&amp;", "&");
      return `<img src="${u}" alt="${alt}">`;
    });
    s = s.replace(/\[([^\]]+?)\]\((.+?)\)/g, (m, text, url) => {
      const u = escapeHtml(url).replaceAll("&amp;", "&");
      return `<a href="${u}" target="_blank" rel="noopener noreferrer">${text}</a>`;
    });
    s = s.replace(/`([^`]+?)`/g, (m, code) => `<code>${code}</code>`);
    s = s.replace(/\*\*([^*]+?)\*\*/g, "<strong>$1</strong>");
    s = s.replace(/__([^_]+?)__/g, "<strong>$1</strong>");
    s = s.replace(/~~([^~]+?)~~/g, "<del>$1</del>");
    s = s.replace(/(^|[^\*])\*([^*]+?)\*(?!\*)/g, "$1<em>$2</em>");
    s = s.replace(/(^|[^_])_([^_]+?)_(?!_)/g, "$1<em>$2</em>");
    return s;
  }

  function markdownToHtml(mdRaw){
    const md = String(mdRaw || "").replace(/\r\n/g, "\n");
    const codeBlocks = [];
    let tmp = md.replace(/```([\s\S]*?)```/g, (m, code) => {
      const id = codeBlocks.length;
      codeBlocks.push(code);
      return `\n@@CODEBLOCK_${id}@@\n`;
    });

    const blocks = tmp.split(/\n{2,}/).map(b => b.trim()).filter(Boolean);
    const out = [];

    for (const b of blocks) {
      const mCode = b.match(/^@@CODEBLOCK_(\d+)@@$/);
      if (mCode) {
        const code = escapeHtml(codeBlocks[+mCode[1]] ?? "");
        out.push(`<pre><code>${code}</code></pre>`);
        continue;
      }

      const mH = b.match(/^(#{1,3})\s+([\s\S]+)$/);
      if (mH) {
        const level = mH[1].length;
        const text = inlineMd(escapeHtml(mH[2].trim()));
        out.push(`<h${level}>${text}</h${level}>`);
        continue;
      }

      if (/^(-{3,}|\*{3,}|_{3,})$/.test(b)) {
        out.push("<hr/>");
        continue;
      }

      if (b.split("\n").every(line => line.trim().startsWith(">"))) {
        const inner = b.split("\n").map(line => line.replace(/^\s*>\s?/, "")).join("\n");
        const html = markdownToHtml(inner);
        out.push(`<blockquote>${html}</blockquote>`);
        continue;
      }

      const lines = b.split("\n");
      const isUl = lines.every(l => /^(\-|\*|\+)\s+/.test(l.trim()));
      const isOl = lines.every(l => /^\d+\.\s+/.test(l.trim()));
      if (isUl || isOl) {
        const tag = isUl ? "ul" : "ol";
        const items = lines.map(l => {
          const t = isUl ? l.trim().replace(/^(\-|\*|\+)\s+/, "") : l.trim().replace(/^\d+\.\s+/, "");
          return `<li>${inlineMd(escapeHtml(t))}</li>`;
        }).join("");
        out.push(`<${tag}>${items}</${tag}>`);
        continue;
      }

      const p = inlineMd(escapeHtml(b)).replace(/\n/g, "<br/>");
      out.push(`<p>${p}</p>`);
    }

    return out.join("\n");
  }

  function bbcodeToHtml(raw){
    let s = String(raw || "");
    s = escapeHtml(s);

    const codeBlocks = [];
    s = s.replace(/\[code\]([\s\S]*?)\[\/code\]/gi, (m, code) => {
      const id = codeBlocks.length;
      codeBlocks.push(code);
      return `@@BBCODECODE_${id}@@`;
    });

    const rep = [
      [/\[b\]([\s\S]*?)\[\/b\]/gi, "<strong>$1</strong>"],
      [/\[i\]([\s\S]*?)\[\/i\]/gi, "<em>$1</em>"],
      [/\[u\]([\s\S]*?)\[\/u\]/gi, "<u>$1</u>"],
      [/\[s\]([\s\S]*?)\[\/s\]/gi, "<del>$1</del>"],
      [/\[quote\]([\s\S]*?)\[\/quote\]/gi, "<blockquote>$1</blockquote>"],
      [/\[hr\]/gi, "<hr/>"],
    ];
    for (const [re, to] of rep) s = s.replace(re, to);

    s = s.replace(/\[url\]([\s\S]*?)\[\/url\]/gi, (m, url) => {
      const u = url.trim().replaceAll("&amp;", "&");
      return `<a href="${u}" target="_blank" rel="noopener noreferrer">${u}</a>`;
    });
    s = s.replace(/\[url=([\s\S]*?)\]([\s\S]*?)\[\/url\]/gi, (m, url, text) => {
      const u = url.trim().replaceAll("&amp;", "&");
      return `<a href="${u}" target="_blank" rel="noopener noreferrer">${text}</a>`;
    });

    s = s.replace(/\[img\]([\s\S]*?)\[\/img\]/gi, (m, url) => {
      const u = url.trim().replaceAll("&amp;", "&");
      return `<img src="${u}" alt="image">`;
    });

    s = s.replace(/\[color=([#\w(),.\s]+)\]([\s\S]*?)\[\/color\]/gi, (m, c, t) => {
      const color = c.replace(/[^#\w(),.\s]/g, "").trim();
      return `<span style="color:${color}">${t}</span>`;
    });
    s = s.replace(/\[size=(\d+)\]([\s\S]*?)\[\/size\]/gi, (m, n, t) => {
      const px = clamp(parseInt(n, 10) || 16, 10, 60);
      return `<span style="font-size:${px}px">${t}</span>`;
    });

    s = s.replace(/\[list\]([\s\S]*?)\[\/list\]/gi, (m, inner) => {
      const parts = inner.split(/\[\*\]/).map(x => x.trim()).filter(Boolean);
      const lis = parts.map(x => `<li>${x}</li>`).join("");
      return `<ul>${lis}</ul>`;
    });

    s = s.replace(/@@BBCODECODE_(\d+)@@/g, (m, id) => {
      const code = codeBlocks[+id] ?? "";
      return `<pre><code>${code}</code></pre>`;
    });

    const blocks = s.split(/\n{2,}/).map(b => b.trim()).filter(Boolean);
    const html = blocks.map(b => {
      if (/^(<h\d|<ul|<ol|<pre|<blockquote|<hr|<img)/i.test(b)) return b;
      return `<p>${b.replace(/\n/g, "<br/>")}</p>`;
    }).join("\n");

    return html;
  }

  function plainToHtml(raw){
    const s = escapeHtml(String(raw || ""));
    const blocks = s.split(/\n{2,}/).map(b => b.trim()).filter(Boolean);
    return blocks.map(b => `<p>${b.replace(/\n/g, "<br/>")}</p>`).join("\n");
  }

  function getTextHtml(){
    const raw = $("#textInput").value || "";
    const fmt = $("#textFormat").value;
    if (fmt === "bbcode") return bbcodeToHtml(raw);
    if (fmt === "plain") return plainToHtml(raw);
    return markdownToHtml(raw);
  }

  function getThemeColors(){
    const theme = $("#textTheme").value;
    if (theme === "dark") return { bg: "#0b0c10", fg: "#eaf0ff" };
    if (theme === "transparent") return { bg: "transparent", fg: "#111827" };
    return { bg: "#ffffff", fg: "#111827" };
  }

  function applyRenderStyles(el){
    const fs = clamp(parseInt($("#textFontSize").value, 10) || 16, 12, 28);
    const lh = String($("#textLineHeight").value || "1.6").trim();
    const pad = clamp(parseInt($("#textPadding").value, 10) || 24, 0, 80);
    const { bg, fg } = getThemeColors();
    el.style.fontSize = fs + "px";
    el.style.lineHeight = lh;
    el.style.padding = pad + "px";
    el.style.background = bg;
    el.style.color = fg;
  }

  // 预览（节流）
  let previewTimer = null;
  function updatePreview(){
    if (state.mode !== "text") return;
    clearTimeout(previewTimer);
    previewTimer = setTimeout(() => {
      const targetW = getTargetWidth();
      const html = getTextHtml();
      const box = $("#previewBox");
      const root = $("#previewRender");
      root.innerHTML = html;
      applyRenderStyles(root);
      box.style.width = targetW + "px";

      const txt = $("#textInput").value.trim();
      $("#previewInfo").textContent = txt ? `约 ${txt.length} 字符` : "—";

      setFileInfo(txt ? `文字（${txt.length} 字符）` : "未输入文字");
      setButtons();
    }, 120);
  }

  ["input", "change"].forEach(evt => {
    $("#textInput").addEventListener(evt, updatePreview);
    $("#textFormat").addEventListener(evt, updatePreview);
    $("#textTheme").addEventListener(evt, updatePreview);
    $("#textFontSize").addEventListener(evt, updatePreview);
    $("#textLineHeight").addEventListener(evt, updatePreview);
    $("#textPadding").addEventListener(evt, updatePreview);
    $("#targetWidth").addEventListener(evt, updatePreview);
  });

  // =========================
  //  文本 -> Canvas：方案 A（SVG foreignObject，效果最好，但部分浏览器会失败）
  // =========================
  function buildSvgDataUrl({ html, width, height, dpr, bg, fg, fs, lh, pad }){
    const safeWidth = Math.max(1, Math.floor(width));
    const safeHeight = Math.max(1, Math.floor(height));
    const W = Math.max(1, Math.floor(safeWidth * dpr));
    const H = Math.max(1, Math.floor(safeHeight * dpr));

    const containerStyle = [
      `width:${safeWidth}px`,
      `min-height:${safeHeight}px`,
      `box-sizing:border-box`,
      `background:${bg}`,
      `color:${fg}`,
      `font-family:system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Microsoft YaHei",sans-serif`,
      `font-size:${fs}px`,
      `line-height:${lh}`,
      `padding:${pad}px`,
      `word-break:break-word`,
      `overflow-wrap:anywhere`,
      `transform:scale(${dpr})`,
      `transform-origin:0 0`
    ].join(";");

    const css = `
      h1,h2,h3{margin:.6em 0 .35em;line-height:1.25}
      h1{font-size:1.55em} h2{font-size:1.32em} h3{font-size:1.15em}
      p{margin:.55em 0}
      ul,ol{margin:.55em 0 .55em 1.2em;padding:0}
      li{margin:.18em 0}
      blockquote{margin:.7em 0;padding:.55em .85em;border-left:4px solid rgba(0,0,0,.18);background:rgba(0,0,0,.04);border-radius:10px}
      code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:.95em;background:rgba(0,0,0,.06);padding:.12em .35em;border-radius:8px}
      pre{margin:.75em 0;padding:.75em .85em;background:rgba(0,0,0,.06);border-radius:12px;overflow:auto}
      pre code{background:transparent;padding:0}
      a{color:#2563eb;text-decoration:underline;text-underline-offset:2px}
      hr{border:0;border-top:1px solid rgba(0,0,0,.14);margin:.9em 0}
      img{max-width:100%;height:auto;border-radius:10px;display:block;margin:.6em 0}
    `.trim();

    const svg = `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}">
  <foreignObject x="0" y="0" width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml" style="${containerStyle}">
      <style>${css}</style>
      ${html}
    </div>
  </foreignObject>
</svg>`;

    return URL.createObjectURL(new Blob([svg], { type: "image/svg+xml;charset=utf-8" }));
  }

  function loadImageFromUrl(url){
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.decoding = "async";
      img.onload = () => resolve(img);
      img.onerror = (e) => reject(e);
      img.src = url;
    });
  }

  async function textToCanvasSVG(){
    const text = $("#textInput").value.trim();
    if (!text) throw new Error("empty text");

    const targetW = getTargetWidth();

    const fs = clamp(parseInt($("#textFontSize").value, 10) || 16, 12, 28);
    const lh = String($("#textLineHeight").value || "1.6").trim();
    const pad = clamp(parseInt($("#textPadding").value, 10) || 24, 0, 80);

    const outMime = $("#outFormat").value || "image/png";
    const theme = $("#textTheme").value;
    let { bg, fg } = getThemeColors();

    if (outMime === "image/jpeg" && theme === "transparent") {
      bg = "#ffffff";
      fg = "#111827";
    }

    // 测量高度（用 DOM）
    const host = $("#measureHost");
    host.innerHTML = "";
    const wrap = document.createElement("div");
    wrap.style.width = targetW + "px";

    const root = document.createElement("div");
    root.className = "renderRoot";
    root.innerHTML = getTextHtml();
    applyRenderStyles(root);
    root.style.width = targetW + "px";
    root.style.margin = "0";
    root.style.boxSizing = "border-box";

    wrap.appendChild(root);
    host.appendChild(wrap);
    await nextFrame();

    const height = Math.ceil(root.scrollHeight);

    const dpr = Math.max(1, Math.min(3, window.devicePixelRatio || 1));
    const svgUrl = buildSvgDataUrl({
      html: root.innerHTML,
      width: targetW,
      height,
      dpr,
      bg, fg, fs, lh, pad
    });

    try {
      const img = await loadImageFromUrl(svgUrl);
      const canvas = document.createElement("canvas");
      canvas.width = Math.floor(targetW * dpr);
      canvas.height = Math.floor(height * dpr);

      const ctx = canvas.getContext("2d", { alpha: outMime !== "image/jpeg" });
      if (outMime === "image/jpeg") {
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }
      ctx.drawImage(img, 0, 0);
      return { canvas, logicalWidth: targetW, logicalHeight: height, method: "svg" };
    } finally {
      URL.revokeObjectURL(svgUrl);
      host.innerHTML = "";
    }
  }

  // =========================
  //  文本 -> Canvas：方案 B（纯 Canvas 排版，Safari 也稳）
  // =========================
  function parseLineHeight(){
    const v = String($("#textLineHeight").value || "1.6").trim();
    const n = parseFloat(v);
    return (Number.isFinite(n) && n > 0.8 && n < 3.5) ? n : 1.6;
  }

  function isSafeToDrawImage(src){
    try {
      if (!src) return false;
      if (src.startsWith("data:") || src.startsWith("blob:")) return true;
      const u = new URL(src, location.href);
      return u.origin === location.origin; // 只允许同源，避免 taint
    } catch {
      return false;
    }
  }

  function roundRect(ctx, x, y, w, h, r){
    const rr = Math.max(0, Math.min(r, Math.min(w, h) / 2));
    ctx.beginPath();
    ctx.moveTo(x + rr, y);
    ctx.arcTo(x + w, y, x + w, y + h, rr);
    ctx.arcTo(x + w, y + h, x, y + h, rr);
    ctx.arcTo(x, y + h, x, y, rr);
    ctx.arcTo(x, y, x + w, y, rr);
    ctx.closePath();
  }

  function getThemePalette(){
    const theme = $("#textTheme").value;
    if (theme === "dark") {
      return {
        bg: "#0b0c10",
        fg: "#eaf0ff",
        muted: "rgba(234,240,255,.78)",
        hr: "rgba(234,240,255,.18)",
        quoteBg: "rgba(255,255,255,.07)",
        quoteBar: "rgba(90,141,255,.75)",
        codeBg: "rgba(255,255,255,.10)",
        codeFg: "#eaf0ff",
        link: "#8ab4ff",
        border: "rgba(255,255,255,.14)"
      };
    }
    if (theme === "transparent") {
      return {
        bg: "transparent",
        fg: "#111827",
        muted: "rgba(17,24,39,.70)",
        hr: "rgba(17,24,39,.18)",
        quoteBg: "rgba(17,24,39,.05)",
        quoteBar: "rgba(37,99,235,.70)",
        codeBg: "rgba(17,24,39,.08)",
        codeFg: "#111827",
        link: "#2563eb",
        border: "rgba(17,24,39,.14)"
      };
    }
    return {
      bg: "#ffffff",
      fg: "#111827",
      muted: "rgba(17,24,39,.70)",
      hr: "rgba(17,24,39,.18)",
      quoteBg: "rgba(17,24,39,.05)",
      quoteBar: "rgba(37,99,235,.70)",
      codeBg: "rgba(17,24,39,.08)",
      codeFg: "#111827",
      link: "#2563eb",
      border: "rgba(17,24,39,.14)"
    };
  }

  function collectInlineSegments(node, style, out){
    if (!node) return;
    if (node.nodeType === 3) { // text
      const t = node.nodeValue || "";
      if (t) out.push({ type: "text", text: t, style: { ...style } });
      return;
    }
    if (node.nodeType !== 1) return;

    const tag = node.tagName.toLowerCase();
    if (tag === "br") {
      out.push({ type: "text", text: "\n", style: { ...style } });
      return;
    }
    if (tag === "img") {
      out.push({ type: "img", src: node.getAttribute("src") || "", alt: node.getAttribute("alt") || "" });
      return;
    }

    const next = { ...style };
    if (tag === "strong" || tag === "b") next.bold = true;
    if (tag === "em" || tag === "i") next.italic = true;
    if (tag === "code") next.code = true;
    if (tag === "a") next.link = true;

    for (const ch of node.childNodes) collectInlineSegments(ch, next, out);
  }

  function htmlToBlocks(html){
    const container = document.createElement("div");
    container.innerHTML = html;

    const blocks = [];
    const pushTextBlock = (segments, opts={}) => {
      const has = segments.some(s => s.type === "text" && s.text.replace(/\s+/g, "").length > 0);
      if (has) blocks.push({ type: "text", segments, ...opts });
    };

    function handleChildrenAsBlocks(parent, opts={}) {
      for (const child of parent.childNodes) {
        if (child.nodeType === 3) {
          const t = (child.nodeValue || "").trim();
          if (t) blocks.push({ type: "text", segments: [{type:"text", text: t, style:{}}], ...opts });
          continue;
        }
        if (child.nodeType !== 1) continue;
        handleElement(child, opts);
      }
    }

    function handleElement(el, opts={}) {
      const tag = el.tagName.toLowerCase();

      if (tag === "h1" || tag === "h2" || tag === "h3") {
        const segs = [];
        for (const ch of el.childNodes) collectInlineSegments(ch, {}, segs);
        pushTextBlock(segs, { ...opts, variant: tag });
        return;
      }

      if (tag === "p") {
        const segs = [];
        // p 里可能夹 img：拆成多个 block
        for (const ch of el.childNodes) {
          const tmp = [];
          collectInlineSegments(ch, {}, tmp);
          for (const it of tmp) {
            if (it.type === "img") {
              pushTextBlock(segs, { ...opts, variant: "p" });
              segs.length = 0;
              blocks.push({ type: "image", src: it.src, alt: it.alt, ...opts });
            } else {
              segs.push(it);
            }
          }
        }
        pushTextBlock(segs, { ...opts, variant: "p" });
        return;
      }

      if (tag === "ul" || tag === "ol") {
        const isOl = tag === "ol";
        let idx = 1;
        for (const li of Array.from(el.children)) {
          if (li.tagName.toLowerCase() !== "li") continue;
          const segs = [];
          for (const ch of li.childNodes) collectInlineSegments(ch, {}, segs);
          blocks.push({
            type: "listItem",
            ordered: isOl,
            index: idx++,
            segments: segs,
            ...opts
          });
        }
        return;
      }

      if (tag === "blockquote") {
        // quote 内部递归为 blocks（但渲染时加缩进）
        const inner = [];
        const prevBlocks = blocks;
        // 临时切换 blocks 输出
        (function(){
          const saved = blocks.splice(0, blocks.length); // 清空，但保存
          // 用同一个数组对象引用不方便；这里简单：新数组 inner，手动写入
        })();
        // 直接递归生成 inner
        const tmpContainer = document.createElement("div");
        tmpContainer.innerHTML = el.innerHTML;
        const innerBlocks = htmlToBlocks(tmpContainer.innerHTML);
        blocks.push({ type: "quote", blocks: innerBlocks, ...opts });
        return;
      }

      if (tag === "pre") {
        const txt = el.textContent || "";
        blocks.push({ type: "codeBlock", text: txt.replace(/\n+$/,""), ...opts });
        return;
      }

      if (tag === "hr") {
        blocks.push({ type: "hr", ...opts });
        return;
      }

      if (tag === "img") {
        blocks.push({ type: "image", src: el.getAttribute("src") || "", alt: el.getAttribute("alt") || "", ...opts });
        return;
      }

      // 兜底：把未知元素当作段落处理
      const segs = [];
      for (const ch of el.childNodes) collectInlineSegments(ch, {}, segs);
      pushTextBlock(segs, { ...opts, variant: "p" });
    }

    for (const el of Array.from(container.childNodes)) {
      if (el.nodeType === 1) handleElement(el);
      else if (el.nodeType === 3) {
        const t = (el.nodeValue || "").trim();
        if (t) blocks.push({ type: "text", segments: [{type:"text", text:t, style:{}}], variant:"p" });
      }
    }

    // 清理：把多余空白段落去掉
    return blocks.filter(b => {
      if (b.type === "text") return b.segments.some(s => s.type==="text" && s.text.trim().length>0);
      if (b.type === "listItem") return b.segments.some(s => s.type==="text" && s.text.trim().length>0);
      return true;
    });
  }

  function fontKey({ bold=false, italic=false, code=false, size=16 }){
    const fam = code
      ? `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace`
      : `system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft YaHei", sans-serif`;
    const w = bold ? 700 : 400;
    const it = italic ? "italic" : "normal";
    return `${it} ${w} ${size}px ${fam}`;
  }

  function wrapSegmentsToLines(ctx, segments, maxWidth, baseSize, lineBreakOnNewline=true){
    // segments: [{type:"text", text, style{bold,italic,code,link}}]
    const lines = [];
    let line = [];
    let x = 0;

    const cache = wrapSegmentsToLines._cache || (wrapSegmentsToLines._cache = new Map());
    const measureChar = (font, ch) => {
      const key = font + "\u0000" + ch;
      const v = cache.get(key);
      if (v != null) return v;
      ctx.font = font;
      const w = ctx.measureText(ch).width;
      cache.set(key, w);
      return w;
    };

    const pushLine = () => {
      if (line.length === 0) {
        lines.push([]);
      } else {
        lines.push(line);
      }
      line = [];
      x = 0;
    };

    const appendRun = (run) => {
      if (!run.text) return;
      const last = line[line.length - 1];
      if (last && JSON.stringify(last.style) === JSON.stringify(run.style)) {
        last.text += run.text;
        last.width += run.width;
      } else {
        line.push(run);
      }
    };

    for (const seg of segments) {
      if (seg.type !== "text") continue;
      const st = seg.style || {};
      const size = st.code ? Math.round(baseSize * 0.95) : baseSize;
      const font = fontKey({ ...st, code: !!st.code, size });

      const text = String(seg.text || "");
      for (let i = 0; i < text.length; i++) {
        const ch = text[i];

        if (lineBreakOnNewline && ch === "\n") {
          pushLine();
          continue;
        }

        // CJK/无空格场景：逐字 wrap
        const cw = measureChar(font, ch);
        if (x + cw > maxWidth && x > 0) {
          pushLine();
        }

        appendRun({ text: ch, style: { ...st, _size: size, _font: font }, width: cw });
        x += cw;
      }
    }

    if (line.length) lines.push(line);
    if (!lines.length) lines.push([]);
    return lines;
  }

  async function loadSafeImage(src){
    return new Promise((resolve) => {
      const img = new Image();
      img.decoding = "async";
      img.onload = () => resolve(img);
      img.onerror = () => resolve(null);
      // 同源/数据才会走到这里
      img.src = src;
    });
  }

  async function textToCanvasCanvasFallback(){
    const text = $("#textInput").value.trim();
    if (!text) throw new Error("empty text");

    const outMime = $("#outFormat").value || "image/png";
    const theme = $("#textTheme").value;

    const targetW = getTargetWidth();
    const fs = clamp(parseInt($("#textFontSize").value, 10) || 16, 12, 28);
    const lh = parseLineHeight();
    const pad = clamp(parseInt($("#textPadding").value, 10) || 24, 0, 80);

    const palette = getThemePalette();
    let bg = palette.bg;
    if (outMime === "image/jpeg") bg = "#ffffff"; // jpg 强制白底

    const html = getTextHtml();
    const blocks = htmlToBlocks(html);

    // 预加载“安全图片”（data/blob/同源），外链一律占位避免污染 canvas
    for (const b of blocks) {
      if (b.type === "image") {
        b.safe = isSafeToDrawImage(b.src);
        b.img = b.safe ? await loadSafeImage(b.src) : null;
      } else if (b.type === "quote") {
        for (const qb of b.blocks) {
          if (qb.type === "image") {
            qb.safe = isSafeToDrawImage(qb.src);
            qb.img = qb.safe ? await loadSafeImage(qb.src) : null;
          }
        }
      }
    }

    const dpr = Math.max(1, Math.min(3, window.devicePixelRatio || 1));
    // 先用一个临时 canvas 做测量
    const measureCanvas = document.createElement("canvas");
    const mctx = measureCanvas.getContext("2d");

    const contentW = targetW - pad * 2;
    const spacingP = Math.round(fs * 0.55);
    const spacingSmall = Math.round(fs * 0.35);

    // 布局：计算总高度 + 记录绘制指令
    const ops = [];
    let y = pad;

    const pushTextBlockOp = (lines, x, y0, lineHeight, paletteFg, drawInlineCode=true) => {
      ops.push({ kind: "lines", lines, x, y: y0, lineHeight, fg: paletteFg, inlineCode: drawInlineCode });
    };

    const layoutTextSegments = (segments, variant, indent=0) => {
      let size = fs;
      let lhMul = lh;
      if (variant === "h1") { size = Math.round(fs * 1.55); lhMul = 1.25; }
      if (variant === "h2") { size = Math.round(fs * 1.32); lhMul = 1.25; }
      if (variant === "h3") { size = Math.round(fs * 1.15); lhMul = 1.25; }

      const maxW = Math.max(40, contentW - indent);
      const lines = wrapSegmentsToLines(mctx, segments, maxW, size, true);
      const lineH = Math.round(size * lhMul);

      pushTextBlockOp(lines, pad + indent, y, lineH, palette.fg, true);
      y += lines.length * lineH;

      // heading/paragraph spacing
      y += (variant && variant.startsWith("h")) ? spacingSmall : spacingP;
    };

    const layoutListItem = (segments, ordered, index, indent=0) => {
      const prefix = ordered ? `${index}. ` : "• ";
      const prefixSegs = [{ type:"text", text: prefix, style: { bold:false, italic:false, code:false } }];
      const merged = [...prefixSegs, ...segments];

      const maxW = Math.max(40, contentW - indent);
      const lines = wrapSegmentsToLines(mctx, merged, maxW, fs, true);
      const lineH = Math.round(fs * lh);

      pushTextBlockOp(lines, pad + indent, y, lineH, palette.fg, true);
      y += lines.length * lineH;
      y += spacingSmall;
    };

    const layoutCodeBlock = (text, indent=0) => {
      const codeSize = Math.round(fs * 0.95);
      const codeLineH = Math.round(codeSize * 1.45);
      const linesRaw = String(text || "").replace(/\r\n/g,"\n").split("\n");

      // 把每一行当成独立段落 wrap（保持缩进）
      const lines = [];
      for (const l of linesRaw) {
        const segs = [{ type:"text", text: l, style:{ code:true } }];
        const wrapped = wrapSegmentsToLines(mctx, segs, Math.max(40, contentW - indent), codeSize, false);
        for (const wl of wrapped) lines.push(wl);
      }

      const boxPad = 10;
      const boxX = pad + indent;
      const boxW = Math.max(40, contentW - indent);
      const boxH = lines.length * codeLineH + boxPad * 2;

      ops.push({
        kind: "codeBlock",
        x: boxX, y,
        w: boxW, h: boxH,
        lines,
        lineHeight: codeLineH,
        pad: boxPad
      });
      y += boxH + spacingP;
    };

    const layoutHR = (indent=0) => {
      const x = pad + indent;
      const w = Math.max(40, contentW - indent);
      ops.push({ kind:"hr", x, y: y + 8, w });
      y += 16 + spacingSmall;
    };

    const layoutImage = (src, alt, img, indent=0) => {
      const x = pad + indent;
      const w = Math.max(40, contentW - indent);

      let h = 240;
      let draw = null;
      if (img) {
        const ratio = img.naturalHeight / Math.max(1, img.naturalWidth);
        h = Math.max(40, Math.min(1600, Math.round(w * ratio)));
        draw = { img };
      }

      ops.push({ kind:"image", x, y, w, h, src, alt, draw });
      y += h + spacingP;
    };

    const layoutQuote = (innerBlocks, indent=0) => {
      const qPadX = 12;
      const qPadY = 10;
      const barW = 4;

      const startY = y;
      // 先占位，等内部布局完成后回填高度
      const opIndex = ops.length;
      ops.push({ kind:"quoteBox", x: pad + indent, y: startY, w: Math.max(40, contentW - indent), h: 0, barW, padX: qPadX, padY: qPadY });

      y += qPadY;
      const innerIndent = indent + qPadX + barW + 10;

      for (const b of innerBlocks) {
        if (b.type === "text") layoutTextSegments(b.segments, b.variant || "p", innerIndent);
        else if (b.type === "listItem") layoutListItem(b.segments, b.ordered, b.index, innerIndent);
        else if (b.type === "codeBlock") layoutCodeBlock(b.text, innerIndent);
        else if (b.type === "hr") layoutHR(innerIndent);
        else if (b.type === "image") layoutImage(b.src, b.alt, b.img, innerIndent);
        else if (b.type === "quote") layoutQuote(b.blocks, innerIndent);
      }

      y += qPadY;
      const endY = y;
      ops[opIndex].h = Math.max(40, endY - startY);
      y += spacingSmall;
    };

    for (const b of blocks) {
      if (b.type === "text") layoutTextSegments(b.segments, b.variant || "p", 0);
      else if (b.type === "listItem") layoutListItem(b.segments, b.ordered, b.index, 0);
      else if (b.type === "codeBlock") layoutCodeBlock(b.text, 0);
      else if (b.type === "hr") layoutHR(0);
      else if (b.type === "image") layoutImage(b.src, b.alt, b.img, 0);
      else if (b.type === "quote") layoutQuote(b.blocks, 0);
    }

    y += pad;
    const totalH = Math.max(1, Math.ceil(y));

    // 正式 canvas
    const canvas = document.createElement("canvas");
    canvas.width = Math.floor(targetW * dpr);
    canvas.height = Math.floor(totalH * dpr);
    const ctx = canvas.getContext("2d", { alpha: outMime !== "image/jpeg" });

    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

    // 背景
    if (bg !== "transparent") {
      ctx.fillStyle = bg;
      ctx.fillRect(0, 0, targetW, totalH);
    } else if (outMime === "image/jpeg") {
      ctx.fillStyle = "#ffffff";
      ctx.fillRect(0, 0, targetW, totalH);
    }

    ctx.textBaseline = "top";
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = "high";

    // 绘制
    for (const op of ops) {
      if (op.kind === "quoteBox") {
        ctx.fillStyle = palette.quoteBg;
        roundRect(ctx, op.x, op.y, op.w, op.h, 12);
        ctx.fill();

        ctx.fillStyle = palette.quoteBar;
        ctx.fillRect(op.x + 10, op.y + 10, op.barW, op.h - 20);
        continue;
      }

      if (op.kind === "hr") {
        ctx.strokeStyle = palette.hr;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(op.x, op.y);
        ctx.lineTo(op.x + op.w, op.y);
        ctx.stroke();
        continue;
      }

      if (op.kind === "codeBlock") {
        ctx.fillStyle = palette.codeBg;
        roundRect(ctx, op.x, op.y, op.w, op.h, 12);
        ctx.fill();

        let ly = op.y + op.pad;
        for (const line of op.lines) {
          let lx = op.x + op.pad;
          for (const run of line) {
            const size = run.style?._size ?? Math.round(fs * 0.95);
            const font = run.style?._font ?? fontKey({ code:true, size });
            ctx.font = font;
            ctx.fillStyle = palette.codeFg;
            ctx.fillText(run.text, lx, ly);
            lx += run.width || ctx.measureText(run.text).width;
          }
          ly += op.lineHeight;
        }
        continue;
      }

      if (op.kind === "image") {
        // 图片或占位框
        if (op.draw?.img) {
          ctx.drawImage(op.draw.img, op.x, op.y, op.w, op.h);
          // 轻微边框
          ctx.strokeStyle = palette.border;
          ctx.lineWidth = 1;
          roundRect(ctx, op.x, op.y, op.w, op.h, 10);
          ctx.stroke();
        } else {
          ctx.fillStyle = (palette.bg === "#0b0c10") ? "rgba(255,255,255,.08)" : "rgba(17,24,39,.06)";
          roundRect(ctx, op.x, op.y, op.w, op.h, 10);
          ctx.fill();
          ctx.strokeStyle = palette.border;
          ctx.lineWidth = 1;
          ctx.stroke();

          ctx.fillStyle = palette.muted;
          const msg1 = "外链图片未直接绘制（避免跨域污染）";
          const msg2 = (op.src || "").slice(0, 120);
          ctx.font = fontKey({ size: Math.round(fs * 0.9) });
          ctx.fillText(msg1, op.x + 12, op.y + 12);
          ctx.font = fontKey({ size: Math.round(fs * 0.82) });
          ctx.fillText(msg2, op.x + 12, op.y + 12 + Math.round(fs * 1.3));
        }
        continue;
      }

      if (op.kind === "lines") {
        let ly = op.y;
        for (const line of op.lines) {
          // inline code 背景
          if (op.inlineCode) {
            let bx = op.x;
            for (const run of line) {
              const st = run.style || {};
              if (st.code) {
                const h = Math.round((st._size ?? fs) + 6);
                const yy = ly + Math.round((op.lineHeight - h) / 2);
                ctx.fillStyle = palette.codeBg;
                roundRect(ctx, bx - 2, yy, (run.width || 0) + 4, h, 8);
                ctx.fill();
              }
              bx += run.width || 0;
            }
          }

          // 文本
          let lx = op.x;
          for (const run of line) {
            const st = run.style || {};
            const font = st._font || fontKey({ ...st, code: !!st.code, size: st._size ?? fs });
            ctx.font = font;

            if (st.link) ctx.fillStyle = palette.link;
            else if (st.code) ctx.fillStyle = palette.codeFg;
            else ctx.fillStyle = palette.fg;

            ctx.fillText(run.text, lx, ly);
            // 简单下划线（link）
            if (st.link) {
              const w = run.width || ctx.measureText(run.text).width;
              ctx.strokeStyle = palette.link;
              ctx.lineWidth = 1;
              ctx.beginPath();
              ctx.moveTo(lx, ly + op.lineHeight - 2);
              ctx.lineTo(lx + w, ly + op.lineHeight - 2);
              ctx.stroke();
            }

            lx += run.width || ctx.measureText(run.text).width;
          }
          ly += op.lineHeight;
        }
      }
    }

    return { canvas, logicalWidth: targetW, logicalHeight: totalH, method: "canvas" };
  }

  async function textToCanvasSmart(){
    // 先试 SVG foreignObject，失败就降级到 Canvas 排版
    try {
      const res = await textToCanvasSVG();
      return res;
    } catch (e) {
      console.warn("textToCanvasSVG failed, fallback to canvas renderer:", e);
      toast("文字转图：SVG 渲染失败，已自动切换 Canvas 兼容模式（Safari 也可用）");
      const res = await textToCanvasCanvasFallback();
      return res;
    }
  }

  // =========================
  //  粘贴：优先图片，其次文本
  // =========================
  document.addEventListener("paste", async (e) => {
    const items = e.clipboardData?.items;
    if (!items) return;

    for (const it of items) {
      if (it.type && it.type.startsWith("image/")) {
        const file = it.getAsFile();
        if (file) {
          setImageFile(file);
          toast("已粘贴图片（来自剪贴板）");
          return;
        }
      }
    }

    const text = e.clipboardData?.getData?.("text/plain");
    if (text && text.trim()) {
      setMode("text");
      const ta = $("#textInput");
      const start = ta.selectionStart ?? ta.value.length;
      const end = ta.selectionEnd ?? ta.value.length;
      const before = ta.value.slice(0, start);
      const after = ta.value.slice(end);
      ta.value = before + text + after;
      const pos = (before + text).length;
      ta.selectionStart = ta.selectionEnd = pos;

      toast("已粘贴文字（支持 Markdown/BBCode）");
      updatePreview();
      return;
    }
  });

  // =========================
  //  主按钮
  // =========================
  $("#btnGenerate").addEventListener("click", async () => {
    try {
      clearSlices();
      setButtons();

      if (state.mode === "image") {
        if (!state.imageFile) {
          toast("先选择/拖入/粘贴一张图片");
          return;
        }

        setStatus("解码图片中…");
        const bitmap = await loadBitmap(state.imageFile);
        state.bitmap = bitmap;

        setStatus("生成切片中…");
        const res = await generateSlices(bitmap, state.imageName || "image");
        state.slices = res.slices;
        renderSlices();

        setStatus(`完成：${state.slices.length} 张切片（原图 ${res.srcW}×${res.srcH} → 等宽 ${res.targetW}px）`);
        toast("生成完成");
        setButtons();
        return;
      }

      // text mode
      const t = $("#textInput").value.trim();
      if (!t) {
        toast("先粘贴/输入一些文字");
        return;
      }

      setStatus("渲染文字为图片中…");
      const { canvas, logicalWidth, logicalHeight, method } = await textToCanvasSmart();
      state.bitmap = canvas;

      setStatus("生成切片中…");
      const baseName = "text";
      const res = await generateSlices(canvas, baseName);
      state.slices = res.slices;
      renderSlices();

      setStatus(`完成：${state.slices.length} 张切片（文字图约 ${logicalWidth}×${logicalHeight}px；模式：${method}）`);
      toast("生成完成");
      setButtons();
    } catch (err) {
      console.error(err);
      setStatus("生成失败（见控制台）");
      toast("生成失败：请看控制台错误");
      setButtons();
    }
  });

  $("#btnZip").addEventListener("click", async () => {
    if (!state.slices.length) return;

    try {
      setStatus("打包 ZIP 中…");
      const files = state.slices.map(s => ({ name: s.name, blob: s.blob }));
      const zipBlob = await makeZip(files);

      const url = URL.createObjectURL(zipBlob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "slices.zip";
      document.body.appendChild(a);
      a.click();
      a.remove();
      setTimeout(() => URL.revokeObjectURL(url), 4000);

      setStatus(`完成：${state.slices.length} 张切片（ZIP 已开始下载）`);
      toast("ZIP 已开始下载");
    } catch (err) {
      console.error(err);
      setStatus("ZIP 打包失败（见控制台）");
      toast("ZIP 打包失败：请看控制台错误");
    }
  });

  $("#btnClear").addEventListener("click", () => clearAll());

  // =========================
  //  初始化
  // =========================
  setMode("image");
  setButtons();
  updatePreview();
</script>
</body>
</html>