> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 開發工具使用指南

> 開發工具的使用技巧.

## 使用技巧

### html2canvas 元素對齊問題解決方案

使用 html2canvas 截圖時,可能出現元素對齊偏差,與浏覽器實际渲染不一致的問題.

**核心問題**:
html2canvas 截圖時元素對齊偏差,與浏覽器實际渲染不一致.

**解決方案:動态 CSS 注入**

通過注入临時修復樣式 + 控制渲染參數,解決對齊偏差問題.

```javascript theme={null}
const exportElement = async () => {
  // 1. 注入修复样式
  const style = document.createElement('style');
  style.id = 'export-fix-style';
  document.head.appendChild(style);
  
  if (style.sheet) {
    style.sheet.insertRule('* { box-sizing: border-box !important; }', 0);
    style.sheet.insertRule('img { display: inline-block !important; }', 1);
    style.sheet.insertRule('div { box-sizing: border-box !important; line-height: 1.2 !important; }', 2);
    style.sheet.insertRule('span { line-height: 1.2 !important; }', 3);
  }
  
  try {
    // 2. 等待资源加载（图片+字体）
    await Promise.all([
      ...document.images.map(img => 
        img.complete ? Promise.resolve() : new Promise(resolve => {
          img.onload = img.onerror = resolve;
        })
      ),
      document.fonts.ready // 等待字体加载完成
    ]);
    
    // 3. 执行截图（关键配置见下文）
    const canvas = await html2canvas(element, {
      scale: 3, // 高清缩放
      foreignObjectRendering: false, // 禁用 foreignObject,使用传统渲染更稳定
      useCORS: true, // 允许跨域图片
      allowTaint: true // 允许污染画布（配合 useCORS 处理跨域）
    });
    
    return canvas.toDataURL('image/png', 1.0); // 返回 PNG 数据
  } finally {
    // 4. 清理临时样式（确保异常时也移除）
    document.getElementById('export-fix-style')?.remove();
  }
};
```

**關鍵配置說明**:

| 參數                       | 推薦值            | 作用說明                                                          |
| ------------------------ | -------------- | ------------------------------------------------------------- |
| `foreignObjectRendering` | `false`        | 禁用 `foreignObject` 渲染模式,改用傳統 Canvas 繪製,避免因 SVG 渲染差異導致的對齊偏差    |
| `box-sizing`             | `border-box`   | 統一盒模型計算方式（含內邊距/邊框）,避免因默認 `content-box` 導致的尺寸計算偏差              |
| `line-height`            | `1.2`          | 固定行高,消除文字因行高動态變化導致的垂直對齊偏移                                     |
| `img { display }`        | `inline-block` | 避免 `img` 默認 `inline` 元素的 `vertical-align: baseline` 導致的基線對齊偏差 |

**注意事項**:

1. **配置一致性**:所有導出場景（如單次導出,批量導出）需使用相同配置,避免不同模式下渲染逻輯差異導致對齊問題.

2. **等待充分**:切換頁面狀態（如動态載入內容,修改樣式）後,需等待至少 `1000ms` 再執行截圖,確保 DOM 和樣式完全穩定.

3. **清理及時**:通過 `try...finally` 確保临時注入的修復樣式（`export-fix-style`）在截圖後必被移除,避免污染頁面正常樣式.

4. **測試全面**:需覆蓋「單次導出」「批量導出」「複雜佈局（含圖片/文字/嵌套元素）」等場景,驗證對齊效果一致性.

***