html2canvas 截图失败主因是DOM未就绪或样式受限；需确保元素已挂载、框架渲染完成、图片启用useCORS且服务支持CORS头、避免不兼容CSS属性，并用toBlob替代toDataURL防内存溢出。
html2canvas 截图失败，页面空白或只截到部分？先检查 DOM 渲染状态
html2canvas 不是“截图工具”，它本质是把当前 DOM 快照渲染成 canvas —— 所以它看不到还没挂载、还没完成样式计算、或者被 display: none 或 visibility: hidden 隐藏的节点。
常见错误现象：html2canvas 返回空白 canvas，或只截到 header；控制台没报错，但结果不对。
- 确保目标元素已真实插入
document.body（不是仅创建了 DOM 节点但未 append） - 如果目标是动态渲染内容（比如 Vue/React 组件），等框架完成 patch 后再调用，例如 Vue 中用
nextTick，React 中用useEffect或setTimeout延迟 1 帧 - 避免截取
iframe、video、canvas等跨域资源（会触发 CORS 限制，直接跳过或报错Failed to execute 'toDataURL' on 'HTMLCanvasElement'）
html2canvas 的 scale 和 useCORS 参数怎么配才不糊也不跨域失败？
默认情况下，html2canvas 用设备像素比（window.devicePixelRatio）缩放输出，但若没配 useCORS: true，带图片的页面大概率截出来是空白或黑块。
关键不是“开不开 CORS”，而是“有没有权限 + 有没有正确声明”：
立即学习“前端免费学习笔记（深入）”；
-
useCORS: true是必须的，但前提是图片服务支持Access-Control-Allow-Origin头（本地 file:// 协议下永远失败，必须走 http(s)） -
scale控制输出清晰度：设为2可提升高分屏下的文字/边框锐度，但会显著增加内存和耗时；scale: 1在普通屏上够用，且更稳定 - 别同时设
logging: true上生产，它会吃掉大量 console 性能，还可能暴露 DOM 结构
示例最小可靠配置：
html2canvas(element, {
useCORS: true,
scale: window.devicePixelRatio || 1,
logging: false
});
为什么 html2canvas 截不到 CSS 动画、阴影、filter 或 flex 布局？
html2canvas 不执行 CSS 动画帧，也不解析所有 CSS 属性 —— 它靠遍历 computedStyle 模拟渲染，而很多现代属性（如 backdrop-filter、clip-path、部分 transform 组合）不在其支持列表里。
典型表现：按钮阴影消失、圆角变直角、flex 子项错位、文字模糊、渐变背景变成纯色。
- 优先用基础 CSS：用
box-shadow代替filter: drop-shadow()；用border-radius代替clip-path: circle() - flex 布局尽量避免
flex: 1+min-width: 0这类组合，容易在计算 width 时出错；改用固定width或max-width - 字体图标（如 iconfont）需确保字体文件也支持 CORS，否则显示为方块；建议改用 SVG 内联或 base64 图片
导出 PNG 失败或文件体积爆炸？别直接 toDataURL
toDataURL('image/png') 在大图（尤其高 scale）下极易触发内存溢出或卡死，Chrome 甚至会直接崩溃。这不是 bug，是浏览器对 canvas 数据 URI 的硬限制（通常 ~100MB）。
- 改用
canvas.toBlob(callback, 'image/png', 0.9)，绕过 data URL 字符串拼接，内存友好 - 导出前可先调用
canvas.getContext('2d').getImageData(0, 0, 1, 1)做轻量健康检查，避免白忙活 - 服务端不接受 data URL？那就别传——前端转成 Blob 后用
FormData直传二进制，后端收multipart/form-data
真正难的从来不是“怎么调用”，而是判断哪段 DOM 实际可截、哪些样式注定丢、以及什么时候该放弃 html2canvas 改用服务端渲染截图。
