html2canvas截图常见问题有四类：一是异步执行未等待Promise完成导致白图；二是未适配devicePixelRatio引发模糊；三是Chrome限制data URL跳转需改用a标签download；四是动态图表需单独导出再合成。
点击按钮触发截图，但页面内容没进Canvas
常见原因是 html2canvas 异步执行，而你直接在调用后立刻读取 canvas 或转图——此时 DOM 还没渲染完。必须等 html2canvas() 的 Promise resolve 后再操作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标容器有明确宽高（
position: relative+width/height），否则html2canvas可能截出空白或错位 - 避免对
body或整个html截图，优先指定一个带id="screenshot-area"的<div> - 若含 SVG、Canvas、iframe 或跨域图片，需额外配置：
useCORS: true、allowTaint: true（注意：后者仅适用于同源） - 示例关键片段：
document.getElementById('btn-screenshot').addEventListener('click', async () => { const element = document.getElementById('screenshot-area'); const canvas = await html2canvas(element, { useCORS: true }); const imgData = canvas.toDataURL('image/png'); // 后续下载或显示 });
生成的 PNG 图片模糊、文字锯齿严重
根本原因是 html2canvas 默认按设备像素比（window.devicePixelRatio）缩放渲染，但未同步调整 canvas 的 width/height 属性，导致浏览器缩放失真。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手动放大 canvas 缓冲尺寸：
const scale = window.devicePixelRatio || 1; const canvas = await html2canvas(element, { scale, width: element.offsetWidth * scale, height: element.offsetHeight * scale, logging: false }); - 不建议强行设
scale: 2而不配width/height，会模糊；也不建议设scale: 1在高清屏上，会小且发虚 - 字体渲染还受 CSS
font-smoothing影响，可临时加：element.style.webkitFontSmoothing = 'antialiased';
点击下载图片失败，提示 “Not allowed to navigate top frame to data URL”
这是 Chrome 95+ 对 data: URL 直接跳转的限制。不能用 window.location.href = imgData 触发下载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
<a>标签 +download属性：const link = document.createElement('a'); link.download = 'screenshot.png'; link.href = imgData; link.click(); - 注意：
link.href必须是完整 data URL（以data:image/png;base64,开头），不能是 blob URL（除非你用URL.createObjectURL()显式创建） - 部分旧版 Safari 不支持
download，可降级为window.open(imgData)（新窗口打开查看）
截图区域含动态图表（如 ECharts、Chart.js）或自定义 Canvas
这类内容不会被 html2canvas 自动捕获，因为它们是 WebGL 或 2D context 绘制的位图，不在 DOM 树中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- ECharts：调用实例的
getConnectedDataURL()（v5.4+）或getDataURL()（旧版），它返回原生高质量 PNG - Chart.js：用
chart.canvas.toDataURL()获取自身 canvas 内容，再手动合成到主截图里（需用canvas.getContext('2d')绘制） - 通用方案：把动态内容先“导出为图片”，再用
<img>替换原组件，最后对整个区域调用html2canvas
实际用下来，最常卡住的是异步时机和设备像素比处理——前者导致白图，后者导致糊图。这两处不调对，其他都白搭。
