最稳的组合是 html2canvas + toblob，因 todataurl 易触发内存限制、safari 崩溃、base64 超长卡死、不压缩体积大、兼容性差且跨域报错；html2canvas 需设 usecors、allowtaint、合理 scale 及目标容器；下载必用 toblob + url.createobjecturl 并立即 revoke。
html2canvas + toBlob 是最稳的组合，toDataURL 在高清屏或内容多时极易触发内存限制、下载失败，甚至 Safari 静默崩溃。
为什么不能只用 toDataURL 下载整个页面
toDataURL 返回的是 Base64 字符串，长度随画布尺寸指数增长。页面含大量 CSS、高缩放（如 Retina 屏）、或跨域图片时，字符串常超 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，且无法try/catch
html2canvas 关键参数必须显式设置
html2canvas 不是“截图工具”，而是 DOM 渲染模拟器：它解析 HTML/CSS 后逐层绘制到 Canvas，不执行 JS 动画、不加载异步资源、也不还原 backdrop-filter 等现代 CSS。
- 必须传
{ useCORS: true, allowTaint: false }，否则跨域图片污染画布，后续toBlob失败 -
scale推荐设为window.devicePixelRatio || 1；值 > 2 易 OOM，建议上限Math.min(2, window.devicePixelRatio) - 避免对
document.body全量截图：滚动条、position: fixed元素常错位，应截document.documentElement或包裹容器（如#app） - 若页面本身含
<canvas></canvas>，默认被跳过，需加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+ 才稳定支持
URL.revokeObjectURL 的调用时机 —— 它必须紧贴 a.click()，不能丢进异步回调里，也不能漏掉；还有就是 scale 和 useCORS 这两个参数，不设就等于默认放弃高清屏和跨域资源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
