未捕获（承诺）无法在克隆的 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 中，请在画布渲染后立即将其删除。