未捕获（承诺）无法在克隆的 iframe 中找到元素#2460

Question

如何修复此错误？

我的代码：

const wrapper = document.createElement("div");
const myHTMLString = "<div>Hello</div>";
wrapper.insertAdjacentHTML("afterbegin",myHTMLString);
//console.log(">>>",wrapper);
html2canvas(wrapper,{useCORS: true}).then((canvas) => {
    wrapper.appendChild(canvas); 
    console.log("canvas>>",wrapper.appendChild(canvas));
    var base64encodedstring = canvas.toDataURL('image/jpeg', 1.0);
    console.log("base6", base64encodedstring );
});

错误：

176e275da87 1ms 开始文档克隆
未捕获（承诺）无法在克隆的 iframe 中找到元素

Answer 1

html2canvas 文档说（我以粗体突出显示）：

该脚本允许您直接在用户浏览器上截取网页或其部分内容的“屏幕截图”。屏幕截图是基于 DOM [...]

脚本遍历其加载页面的 DOM 。它收集所有元素的信息，然后使用这些信息构建页面的表示。换句话说，它实际上并没有截取页面的屏幕截图，而是根据它从 DOM 读取的属性构建页面的表示。

这一切都意味着您传递给

html2canvas

的参数必须是文档中存在的元素。这解释了您遇到的（未捕获的）错误：

无法在克隆的 iframe 中找到元素

显然这个工具会创建一个临时的

iframe

，在其中克隆文档。然后它将搜索您作为参数传递的元素。由于在您的情况下

wrapped

不是文档的一部分，因此此搜索失败。因此，在致电

html2canvas

之前，您可以这样做：

document.body.appendChild(wrapper);

然后，如果您不希望它保留在 DOM 中，请在画布渲染后立即将其删除。

Answer 2

html2canvas(targetElement, 选项);

->

html2canvas(targetElement.childNodes[0].children, 选项);

就是不知道为什么！！！