javascript - Uncaught (in promise) 无法在克隆的 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 后再次将其删除。