直接用html2canvas+toblob是最稳组合，因todataurl生成base64字符串长度随画布尺寸指数增长，易超2mb导致chrome卡死、safari静默失败，且不压缩、跨域报securityerror、旧浏览器url长度受限；toblob则内存可控、支持质量压缩、兼容性更优。
直接用 html2canvas + toBlob 是最稳的组合，toDataURL 在大图或高DPI屏上容易触发浏览器内存限制或下载失败。
为什么不能只用 toDataURL 直接下载整个页面
因为 toDataURL 返回的是 Base64 字符串，长度随画布尺寸指数级增长；当页面内容多、缩放高（比如 Retina 屏）、或含大量 CSS 渲染时，生成的字符串可能超 2MB —— 这会卡死 Chrome 的 a.click()，Safari 甚至直接静默失败。
-
toDataURL("image/png")不压缩，体积通常是同等质量toBlob("image/jpeg", 0.8)的 3–5 倍 - IE11 和旧版 Edge 完全不支持
download属性，toDataURL+window.location.href又受限于 URL 长度（通常 ≤ 2MB） - 若页面含跨域图片（如 CDN 上的 avatar），未设
crossOrigin="anonymous"会导致toDataURL抛SecurityError，且无法捕获
html2canvas 的关键参数与避坑点
html2canvas 不是“截图工具”，而是“HTML 渲染模拟器”——它解析 DOM + CSS，再逐层绘制到 Canvas。这意味着：它不执行 JS 动画、不加载异步资源、也不还原某些 CSS 滤镜或 backdrop-filter。
- 必须显式传
{ useCORS: true, allowTaint: false }，否则跨域图片会污染画布，后续toBlob失败 -
scale推荐设为window.devicePixelRatio || 1，否则在高清屏上截图模糊；但值 > 2 易 OOM，建议上限设Math.min(2, window.devicePixelRatio) - 避免对
body全量截图：滚动条、固定定位元素（position: fixed）常错位，应截取document.documentElement或包裹容器（如#app） - 若页面有 canvas 元素本身，
html2canvas默认跳过（安全策略），需加ignoreElements: el => el.tagName === 'CANVAS'并手动重绘
下载逻辑必须用 toBlob + URL.createObjectURL
这是唯一能兼顾大图、内存、兼容性和可控性的路径。重点不是“能不能下”，而是“下完要不要清理”。
- 必须在
click触发后立即调用URL.revokeObjectURL(url)，否则 Blob 引用驻留内存，连续截图几次就卡顿 - 文件名后缀要和 MIME 类型严格匹配：
image/jpeg→.jpg，image/webp→.webp，否则 Safari 下载后可能打不开 - Chrome 和 Firefox 支持
toBlob第三个参数（质量），但 Safari 目前只认image/jpeg，传0.9会被忽略；WebP 在 Safari 16.4+ 才稳定支持 - IE11 不支持
toBlob，得 fallback 到navigator.msSaveBlob，且不能用URL.createObjectURL
完整可粘贴的 index.html 片段（无构建步骤）
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script><button id="screenshotBtn">截图并下载</button>
<script>
document.getElementById('screenshotBtn').addEventListener('click', async () => {
const scale = Math.min(2, window.devicePixelRatio || 1);
try {
const canvas = await html2canvas(document.documentElement, {
useCORS: true,
allowTaint: false,
scale,
logging: false
});
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `screenshot-${new Date().toISOString().slice(0,10)}.jpg`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // ⚠️ 必须这行
}, 'image/jpeg', 0.8);
} catch (err) {
console.error('截图失败:', err);
alert('截图失败，请检查控制台');
}
});
</script>
注意：实际项目中，html2canvas 对 flex/grid 布局、CSS 变量、transform 的还原仍有边界 case；如果截图内容含实时图表（如 ECharts），优先用其自带的 chart.getDataURL()，比 html2canvas 更准更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
