JS 錯誤：元素未附加到文檔

Question

我正在嘗試使用html2canvas lib 將 div 轉換為圖像，但我不斷收到該錯誤

html2canvas.min.js:20 Uncaught (in promise) Error: Element is not attached to a Document
at html2canvas.min.js:20
at html2canvas.min.js:20
at Object.next (html2canvas.min.js:20)
at html2canvas.min.js:20
at new Promise (<anonymous>)
at a (html2canvas.min.js:20)
at Vs (html2canvas.min.js:20)
at html2canvas.min.js:20
at HTMLInputElement.<anonymous> (index4.html:18)
at HTMLInputElement.dispatch (jquery-2.2.4.min.js:3)

我不明白我的代碼有什么問題，當我在 jsfiddle 上運行代碼時，它沒有給我任何錯誤，當我在本地系統上運行它時，它給了我錯誤。

代碼

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> 
</head>

<body>
<div id="phone">45454565756677</div>    

<div id="out_image"></div>
    
 <input type="button" value="Data to Image" id="data_to_image_btn" >
  
  
  
<script>
    
    $(function() { 
    $("#data_to_image_btn").click(function() { 
        html2canvas($("#phone"), {  // no error with : document.getElementById( but nothing is rendered
            onrendered: function(canvas) {
                console.log('done ... ');
                $("#out_image").append(canvas);
            }
        });
    });
}); 
</script>  
</body>
</html>

Answer 1

嘗試這個：

html2canvas($("#phone")[0]).then((canvas) => {
    console.log("done ... ");
    $("#out_image").append(canvas);
});

兩個變化是：將jquery選擇的第一個元素傳遞給html2canvas，而不是選擇本身。 這擺脫了錯誤......但是要發生某些事情，似乎您需要將調用視為 Promise，而不是傳遞onrendered回調（這是第二個更改）

JS 錯誤：元素未附加到文檔

問題描述

1 個解決方案

解決方案1
1 已采納 2020-11-06 14:58:09

JS 錯誤：元素未附加到文檔

問題描述

1 個解決方案

解決方案1 1 已采納 2020-11-06 14:58:09

解決方案1
1 已采納 2020-11-06 14:58:09