如何让html2canvas在初始DOM扫描阶段跳过video元素？

方案1：提前克隆DOM并移除video元素 #

先复制目标DOM节点，在副本中彻底移除所有video元素，再将副本传给html2canvas处理。这样html2canvas完全不会接触到video元素，从根源避免扫描和触发播放：

// 获取需要截图的目标容器
const targetContainer = document.getElementById('your-target-id');
// 深度克隆目标节点
const clonedContainer = targetContainer.cloneNode(true);
// 移除克隆节点内的所有video元素
const videoElements = clonedContainer.querySelectorAll('video');
videoElements.forEach(video => video.remove());
// 基于无video的克隆节点生成截图
html2canvas(clonedContainer).then(canvas => {
    // 处理生成的canvas（示例：添加到页面）
    document.body.appendChild(canvas);
});

该方法让html2canvas处理的DOM完全不含video，彻底跳过对这类元素的遍历和读取，同时解决发声和性能问题。

方案2：利用html2canvas的onclone钩子 #

html2canvas提供onclone配置项，允许在其内部克隆DOM后、渲染前修改克隆文档。借助这个钩子移除video元素，无需手动克隆节点，代码更简洁：

html2canvas(document.body, {
    onclone: (clonedDocument) => {
        // 在克隆后的文档中移除所有video
        const videos = clonedDocument.querySelectorAll('video');
        videos.forEach(video => video.remove());
    }
}).then(canvas => {
    document.body.appendChild(canvas);
});

关于ignoreElements无效的原因 #

ignoreElements仅控制元素是否被渲染，但html2canvas仍会遍历该元素及其子节点，因此仍会触发video的读取逻辑，导致发声和性能损耗。上面两个方案是直接从DOM中移除video，让html2canvas根本不会遍历到它们，才是彻底的解决方式。

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