html2canvas并非所见即所得快照工具，而是通过解析样式并重绘实现转换，不处理transform动画、iframe及跨域图片等原生渲染行为；其不继承浏览器默认样式表，需显式声明字体、颜色等css规则，并配置usecors、scale等参数以保障截图质量。
html2canvas 能直接把 DOM 元素转成 Canvas，但**不是“所见即所得”的快照工具**——它靠解析样式和重绘实现，很多浏览器原生渲染行为（比如 transform 动画、iframe、跨域图片）它压根不处理，或者处理得不一致。用之前得先看清限制。
为什么截图后文字/标题样式丢失？
常见现象：页面里有 <h2>雷猴</h2>，但生成的 Canvas 里字体变小、加粗失效、甚至颜色不对。
原因在于 html2canvas 不继承浏览器默认样式表（user agent stylesheet），只读取你显式声明的 CSS 规则。一旦某个标签没写 font-weight、margin 或 color，它就按空值渲染。
- 给所有要截图的元素显式设置基础样式，比如：
h1, h2, p, li { margin: 0.8em 0; font-weight: normal; color: #333; } - 避免依赖浏览器默认
em、rem计算，改用固定像素值（如font-size: 16px） - 不要指望
@import或异步加载的 CSS 被捕获到——确保样式在调用html2canvas()前已加载并生效
跨域图片加载失败或空白怎么办？
错误信息常是：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
这是 Canvas 污染（tainting）机制触发的，本质是浏览器阻止从不同源加载的图片被读取像素数据。
- 优先设
useCORS: true，要求图片服务返回Access-Control-Allow-Origin: * - 如果服务不支持 CORS，必须配
proxy参数走后端代理，例如：proxy: '/api/cors-proxy' -
allowTaint: true是危险选项，开启后虽能绕过污染限制，但会导致toDataURL()报错，基本不可用 - 本地开发时用
file://协议会直接触发跨域限制，务必起一个本地服务器（如vite preview或http-server）
如何控制截图清晰度和尺寸？
默认输出模糊、小图，是因为 html2canvas 按设备像素比（dpr）缩放逻辑不统一，且未适配高分屏。
- 用
scale参数提升分辨率：scale: 2是最常用安全值，scale: 3适合印刷但内存占用翻倍 - 配合
width和height手动指定 canvas 尺寸，避免自动计算失真 - 设
backgroundColor: '#ffffff'防止透明背景导出 PNG 时发灰；设为null可保留透明通道 - 慎用
logging: true，它会在控制台打印大量 DOM 解析日志，影响性能且无实际调试价值
Vue/React 项目中 DOM 引用时机不对导致截图为空？
典型错误：在组件挂载前就调用 html2canvas(ref.value)，结果 ref.value 是 null 或内容还没渲染出来。
- Vue3 中确保在
onMounted后调用，且等异步数据（如 API 请求）完成后再触发截图 - React 中用
useEffect+ref.current判断是否 ready，必要时加setTimeout微调时机（非推荐，仅临时 workaround） - 若截图区域含动态图表（如 ECharts）、第三方组件（如地图），需手动等待其
render完成事件，不能只依赖 DOM 存在 - 滚动位置会影响截图——
scrollX/scrollY默认为 0，如果目标区域在视口外，得显式传入当前滚动偏移
html2canvas(element)，而是确认样式有没有漏、图片能不能加载、DOM 有没有 ready、缩放有没有糊。这些点串起来，才是截图能用和不能用的分水岭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
