html2canvas不是“所见即所得”工具，它解析dom和css后重绘，不处理transform动画、iframe、跨域图片等原生行为；文字样式丢失因不继承浏览器默认样式表，仅读取显式css规则；跨域图片报错源于canvas污染机制，需设usecors:true并确保服务返回access-control-allow-origin:*；截图模糊因未适配设备像素比，应显式配置scale、width、height；vue/react中需用nexttick或uselayouteffect确保dom就绪。
html2canvas 是目前最可行的“一键截屏保存”方案，但它不是点一下就完事的黑盒——它依赖 DOM 渲染状态、样式兼容性、异步时机，稍不注意就会导出空白、错位或模糊图。
html2canvas 截图前必须清理 transform 和 position: fixed
很多页面用 transform: translateX(10px) 或 position: fixed 做动画/吸顶，但 html2canvas 默认无法正确捕获这些元素的最终渲染位置：
- 地图容器（如 Mapbox、高德）若含
transform，截图后内容偏移甚至消失；解决办法是临时移除该样式，截图完成再恢复 -
position: fixed元素（比如顶部导航栏）在 canvas 中会丢失，需手动计算其相对于视口的位置并补上偏移量 - 部分 CSS 属性（如
filter、backdrop-filter）不被支持，截图时直接忽略，视觉上出现断层
Canvas 转图片必须用 toDataURL 还是 toBlob？
toDataURL 返回 base64 字符串，适合调试和小图预览；toBlob 返回二进制对象，更适合真实下载场景：
-
canvas.toDataURL('image/png', 0.95)：质量参数只对image/jpeg有效，对image/png无效（PNG 不压缩） -
canvas.toBlob(callback, 'image/jpeg', 0.9)：推荐用于下载，避免 base64 字符串过大导致内存暴涨（尤其长图） - 移动端 Safari 对
toBlob支持较晚，iOS 13+ 才稳定，旧版本需 fallback 到toDataURL+a.download模拟点击
保存按钮点击后没反应？检查 Promise 链和 DOM 状态
html2canvas 是异步操作，常见失败原因不是代码写错，而是 DOM 尚未就绪：
- 截图目标元素（如
document.querySelector('#capture')）在调用时为null，尤其在 Vue/React 中未等组件挂载完成就触发 - 图片资源未加载完成，
html2canvas默认不等待<img>的onload，需显式配置useCORS: true+allowTaint: false（跨域图必须开启 CORS） - Promise 被拒绝但没 catch，错误静默吞掉，建议始终加
.catch(console.error) - 按钮本身用了
pointer-events: none或被遮罩层挡住，点击事件根本没触发
高清截图要缩放 canvas，但别盲目设 scale=4
设备像素比（dpr）决定清晰度，但直接放大 canvas 宽高会显著拖慢渲染和内存占用：
- 安全做法：取
window.devicePixelRatio，但上限限制为 2（Math.min(2, window.devicePixelRatio)） - 设置
scale后，必须同步调整 canvas 的style.width和style.height，否则显示被拉伸 - 文字模糊？是因为 canvas 绘制时未启用抗锯齿，可加 CSS：
canvas { image-rendering: -webkit-optimize-contrast; }
html2canvas”，而是它什么时候能拿到一个**稳定、无遮挡、已渲染完毕、样式已生效**的 DOM 快照。这个快照窗口很窄，需要你主动控制节奏，而不是交给 Promise 自己猜。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
