前端怎样实现网页截图？为什么不能直接 drawImage(documentElement)？
先理解原理和示例，再练习完整口述与追问。
回答要点
CanvasImageSource 不包含任意 DOM；DOM 渲染库存在样式兼容边界；真实浏览器截图可服务端完成；跨域资源与隐私必须处理。
原理拆解
Canvas 的 drawImage 接收图片、视频、Canvas、ImageBitmap 等合法图像源，不能直接把 document.documentElement 当作图片，因此 ctx.drawImage(document.documentElement,0,0) 不是可用的整页截图实现。浏览器页面 DOM 和 CSS 排版结果没有通过这个 API 自动转换成一张图片。
纯前端可采用 html2canvas 等库，读取 DOM 与样式并重建绘制，它不等于浏览器原生截图，对复杂 CSS、跨域 iframe、视频和字体等存在兼容限制，需要针对实际页面验收。若需要更接近真实页面渲染的效果，可在服务端用受控浏览器截图，例如 Playwright：限制可访问地址、认证上下文、页面等待条件、超时和资源大小，不能让任意输入变成内网探测或无限资源消耗入口。getDisplayMedia 等屏幕捕获则需要用户明确授权，且不能无提示选择屏幕。
实现时等待必要字体与图片就绪，处理滚动区、固定元素、DPR 与超长页面分片；跨域图片若没有正确的 CORS 授权，绘制后可能污染 Canvas，导致导出抛 SecurityError，前端不能通过设置一个变量绕过服务端跨域策略。截图前还应遮盖密码、令牌和隐私区域，并给用户展示生成中、失败和导出结果。
参考：MDN drawImage。
示例与推演
导出海报时，如果素材都是可授权图片和文字，可直接按画布布局绘制；任意页面 DOM 截图则用经验证的渲染库或受控浏览器。等待字体与图片就绪，按 DPR 控制分辨率，超长页面分段；跨域未授权图片导致画布污染时，导出应给出明确错误。
易错点
不能把 CORS 错误通过前端伪造响应头解决。服务端截图地址须限制访问范围与资源预算，避免成为任意内网请求工具。
参考回答可直接练习口述
Canvas 的 drawImage 接收图片、视频、Canvas、ImageBitmap 等合法图像源，不能直接把 document.documentElement 当作图片，因此 ctx.drawImage(document.documentElement,0,0) 不是可用的整页截图实现。浏览器页面 DOM 和 CSS 排版结果没有通过这个 API 自动转换成一张图片。