未捕获（承诺）无法在克隆的 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 Starting document clone
Uncaught (in promise) Unable to find element in cloned iframe

Answer 1

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

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM [...]

The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.

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

Unable to find element in cloned iframe

显然，此工具会创建一个临时 iframe，并在其中克隆文档。然后它将搜索您作为参数传递的元素。由于在您的情况下 wrapped 不是文档的一部分，因此此搜索失败。

所以在调用 html2canvas 之前你可以这样做：

 document.body.appendChild(wrapper);

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

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

Uncaught (in promise) Unable to find element in cloned iframe #2460

javascript

html5-canvas

html2canvas

typescript

reactjs

我的代码：

错误：