html2canvas截图白屏或内容不全的根本原因是它不解析CSS外链、不执行JS、不加载跨域图片，仅快照当前DOM渲染状态，导致异步资源、字体、阴影等缺失。
用 html2canvas 截图时白屏或内容不全
根本原因是 html2canvas 不解析 CSS 外链、不执行 JS、不加载跨域图片，它只“快照”当前 DOM 的渲染状态。页面里有异步加载的图片、字体、阴影、transform 或 filter，就容易白块、错位、文字缺失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 确保所有图片已加载完成再调用
html2canvas，监听img.onload或用await Promise.all(imgs.map(i => i.decode())) - 避免使用
background-image引入的跨域图，换成内联<img>标签并设crossOrigin="anonymous" - 字体要提前加载好（比如用
document.fonts.load()等待），否则文字会回退成默认字体甚至空白 - 慎用
transform: scale()做缩放——它会让html2canvas计算错布局，改用width/height+scale配合useCORS: true
toBlob() 和 toDataURL() 选哪个
两者都从 html2canvas 返回的 canvas 实例上调用，但行为差异直接影响体验。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
canvas.toDataURL('image/png')直接得 base64 字符串，适合小图预览或塞进<img src="">，但大图会卡主线程、内存暴涨 -
canvas.toBlob(callback, 'image/jpeg', 0.8)是异步的，不阻塞 UI，还能控质量（JPEG）和体积，上传前首选 - 注意：
toBlob在 Safari 旧版本里不支持，需 fallback 到toDataURL；Node.js 环境里这两个都不可用，得换canvas模块
CSS 渲染异常：阴影/圆角/渐变消失
html2canvas 对现代 CSS 支持有限，不是所有样式都能“画出来”。比如 box-shadow 在某些嵌套结构下被忽略，border-radius 遇到 overflow: hidden 子元素可能失效，linear-gradient 背景常被转成纯色。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把关键视觉效果尽量转为 SVG 或内联
<canvas>绘制，比依赖 CSS 更可控 - 避免在要截图的容器上设
overflow: hidden，如果必须，给子元素加position: relative和足够z-index - 测试时打开浏览器开发者工具的“Rendering”面板，勾选“Paint flashing”，看哪些区域实际被绘制了——没闪的，
html2canvas也画不出来
服务端生成 HTML 图片更稳？
前端截图本质是“模拟浏览器渲染”，而服务端（如 Puppeteer）真用 Chromium 渲染，支持完整 CSS/JS/字体，结果更准。但它不是“替代方案”，而是不同场景的选择。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用户实时操作后立刻截图（比如海报编辑器），只能用前端方案；等几秒没关系、且内容固定（如报表导出），Puppeteer 更可靠
- Puppeteer 要额外部署 Node 服务、管理浏览器进程、处理超时和内存泄漏，别低估运维成本
- 若已有服务端，优先用
page.screenshot({ clip: { x, y, width, height } })，比前端少踩 90% 的样式坑
