html2canvas无法捕获img、deckgo-drr元素的问题及全量截图方案

• 1.0.0-rc.5属于html2canvas的早期测试构建，本身就有不少没做完的兼容逻辑，不是业务配错导致的渲染异常，不同类型的节点捕获失败对应的具体原因如下：
• <img />标签丢失的常见触发条件：
  • 版本内置的渲染触发时机为DOM树首次解析完成时，没有内置资源等待逻辑，碰到懒加载图片、动态注入的图片资源时，会直接跳过未加载完成的图片节点
  • 对带crossorigin属性的跨域图片，默认不开启跨域请求适配，碰到没有返回正确CORS头的图片资源时，会直接丢弃对应节点的渲染内容
  • 对带object-fit、CSS滤镜等较新CSS属性的图片，该版本的内置CSS解析器没有实现对应规则的渲染逻辑，会将节点判定为无有效样式跳过渲染
• <deckgo-drr>这类自定义组件丢失的核心触发条件：
  • 该版本完全未实现Shadow DOM的遍历解析能力，而deckgo-drr作为标准Web Component，内部的渲染内容全部封装在Shadow Root中，html2canvas仅能识别组件的自定义标签外壳，无法获取标签内部的实际渲染内容
  • 自定义组件普遍依赖动态内联样式实现拖拽、缩放的交互效果，rc.5版本对运行时动态修改的style属性的解析存在bug，经常会将这类节点判定为无尺寸的空节点跳过渲染

• 针对当前rc.5版本的低成本修复路径
• 截图触发前增加前置校验流程：遍历#result容器内的所有img节点，逐张等待图片加载完成（即complete属性为true、解码无报错）后再调用截图接口；对需要捕获的跨域图片，提前确认服务端返回合规的CORS头，调用html2canvas时显式开启useCORS配置
• 对Shadow DOM类自定义组件做临时内容透出：截图执行前临时把对应自定义组件的Shadow Root设置为开放可遍历状态，将Shadow内部的渲染节点克隆一份插入到组件的Light DOM层，等截图完成后立刻移除临时克隆节点，不破坏原有组件的运行逻辑
• 低代码量的能力升级路径
• 将html2canvas升级到1.4.1及以上的稳定版本，该版本已经补全了基础的Shadow DOM遍历逻辑、图片加载等待机制、多数常见CSS属性的解析能力，对普通图片、常规自定义组件的捕获准确率可覆盖90%以上的业务场景，不需要大规模修改原有业务逻辑
• 1:1还原系统截屏效果的实现路径
• 调用浏览器原生的getDisplayMedia接口捕获当前标签页的可视区域，该能力为浏览器原生实现，不需要对DOM做解析遍历，不管是普通DOM内容、图片、自定义组件、WebGL/Canvas动态渲染内容，都能和用户实际视觉看到的效果完全一致，还原度和移动端系统截屏无差异
• 该方案需要用户手动授权屏幕共享权限，适合对截图还原度要求极高、可接受交互授权的场景，不适合需要无感知自动生成截图的业务流程

内容的提问来源于stack exchange，提问作者Altro