html2canvas截图常见问题有四类：一是异步执行未等待Promise完成导致白图；二是未适配devicePixelRatio引发模糊；三是Chrome限制data URL跳转需改用a标签download；四是动态图表需单独导出再合成。

点击按钮触发截图，但页面内容没进Canvas

常见原因是 html2canvas 异步执行，而你直接在调用后立刻读取 canvas 或转图——此时 DOM 还没渲染完。必须等 html2canvas() 的 Promise resolve 后再操作。

实操建议：

• 确保目标容器有明确宽高（position: relative + width/height），否则 html2canvas 可能截出空白或错位
• 避免对 body 或整个 html 截图，优先指定一个带 id="screenshot-area" 的
• 若含 SVG、Canvas、iframe 或跨域图片，需额外配置：useCORS: true、allowTaint: true（注意：后者仅适用于同源）
• 示例关键片段：

  document.getElementById('btn-screenshot').addEventListener('click', async () => {
    const element = document.getElementById('screenshot-area');
    const canvas = await html2canvas(element, { useCORS: true });
    const imgData = canvas.toDataURL('image/png');
    // 后续下载或显示
  });

生成的 PNG 图片模糊、文字锯齿严重

根本原因是 html2canvas 默认按设备像素比（window.devicePixelRatio）缩放渲染，但未同步调整 canvas 的 width/height 属性，导致浏览器缩放失真。

实操建议：

• 手动放大 canvas 缓冲尺寸：

  const scale = window.devicePixelRatio || 1;
  const canvas = await html2canvas(element, {
    scale,
    width: element.offsetWidth * scale,
    height: element.offsetHeight * scale,
    logging: false
  });

• 不建议强行设 scale: 2 而不配 width/height，会模糊；也不建议设 scale: 1 在高清屏上，会小且发虚
• 字体渲染还受 CSS font-smoothing 影响，可临时加：element.style.webkitFontSmoothing = 'antialiased';

点击下载图片失败，提示 “Not allowed to navigate top frame to data URL”

这是 Chrome 95+ 对 data: URL 直接跳转的限制。不能用 window.location.href = imgData 触发下载。


生成HTML格式PPT
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
下载

实操建议：

• 改用 标签 + download 属性：

  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = imgData;
  link.click();

• 注意：link.href 必须是完整 data URL（以 data:image/png;base64, 开头），不能是 blob URL（除非你用 URL.createObjectURL() 显式创建）
• 部分旧版 Safari 不支持 download，可降级为 window.open(imgData)（新窗口打开查看）

截图区域含动态图表（如 ECharts、Chart.js）或自定义 Canvas

这类内容不会被 html2canvas 自动捕获，因为它们是 WebGL 或 2D context 绘制的位图，不在 DOM 树中。

实操建议：

• ECharts：调用实例的 getConnectedDataURL()（v5.4+）或 getDataURL()（旧版），它返回原生高质量 PNG
• Chart.js：用 chart.canvas.toDataURL() 获取自身 canvas 内容，再手动合成到主截图里（需用 canvas.getContext('2d') 绘制）
• 通用方案：把动态内容先“导出为图片”，再用 替换原组件，最后对整个区域调用 html2canvas

实际用下来，最常卡住的是异步时机和设备像素比处理——前者导致白图，后者导致糊图。这两处不调对，其他都白搭。