html2canvas是最常用前端截图方案，因其兼容性好、api简单、支持多数css样式，但属模拟渲染，会遗漏iframe、跨域图片及fixed定位元素。
纯 HTML 无法直接截图，所有“HTML 截图”功能都依赖 JavaScript 库或浏览器 API，且必须在用户主动触发（如点击按钮）下运行——没有后端配合时，canvas 是唯一可行的前端路径。
为什么 html2canvas 是最常用选择
它把 DOM 元素渲染为 canvas，再转成图片，兼容性好、API 简单、支持大部分 CSS 样式（包括 transform、flex、部分伪元素）。但它不是“真实截图”，而是模拟渲染，所以会漏掉：iframe 内容、跨域图片（会触发 canvas 污染）、position: fixed 脱离文档流的元素（需手动调整偏移）。
实操建议：
- 确保目标元素有明确
id或class，避免选中整个body导致布局错乱 - 对含 SVG 的区域，启用
{ useCORS: true, allowTaint: true }并确保 SVG 内联（非外部引用） - 截图前临时禁用动画：
element.style.animation = 'none'，否则可能截到中间帧 - 导出 PNG 时加
scale: 2提升清晰度，但注意内存占用翻倍
dom-to-image 和 html2canvas 关键区别在哪
dom-to-image 基于 SVG + canvg 渲染，理论上更接近原始样式，支持 @media print 规则和部分 filter 效果；但实际对 flex/grid 支持弱，遇到 background-image: linear-gradient() 易失效，且不支持 transform: rotateZ() 类 3D 变换。
选型建议：
- 要保留文字可复制性、支持 SVG 图标原生缩放 → 用
dom-to-image - 要兼容 IE11、处理复杂布局、截图带阴影/渐变/伪类 → 用
html2canvas - 两者都需处理跨域资源：图片必须同源，或服务端返回
Access-Control-Allow-Origin: *
如何避免“截图空白”或“内容错位”
这是最常踩的坑：目标元素未完全加载、字体未就绪、CSS 变量未计算完成，都会导致 canvas 渲染为空白或错位。
关键步骤：
- 等字体加载完成：
document.fonts.load('12px "PingFang SC"')返回 Promise，再调用截图 - 对动态渲染内容（如 Vue/React 组件），确保
nextTick或useEffect(() => {}, [])后再截图 - 若目标区域含
overflow: hidden，先临时设为visible，截图完恢复 - 滚动位置影响截图范围：用
element.getBoundingClientRect()获取相对视口坐标，必要时window.scrollTo(0, 0)
真正难的是异步资源加载时机和样式计算顺序——不是代码写错，而是没等够。调试时加个 setTimeout(() => { screenshot() }, 500) 常能快速验证是否是时机问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
