如果 canvas 未添加到正文，則 html2canvas 生成空白

Question

這個想法很簡單並且被廣泛描述：使用 html2canvas 插件截取屏幕截圖，然后使用 Ajax 將圖像發送到服務器。

為此，我使用

html2canvas(document.querySelector("body"))
    .then(canvas => {

        document.body.appendChild(canvas) // => pay attention to this line

        const b64 = canvas.toDataURL("image/png").replace(/.*,/, '');
        theFunctionThatSendB64UsingAjax(b64)
        return;
     })

所以，這段優雅的代碼工作得很好，它生成了一個 canvas 元素。 將其附加到正文，然后將 base64 格式字符串發送到服務器。

但我不想顯示 canvas 也不想顯示圖像。 因此，顯而易見的是刪除該行：

document.body.appendChild(canvas)

當我這樣做時，生成的圖像總是空白的。

PS：這個問題只發生在 Firefox 上！ 它在 Chrome 上運行良好

那么，有沒有人至少有一個線索？，或者。 html2canvas 的替代品。

而且，如果重要的話，服務器正在運行一個 golang 腳本，將圖像存儲在 mongodb 中。 服務器端工作正常！

html2canvas 版本 1.0.0-rc.5 ！

編輯：

這個問題不會發生在 v0.4 上，如下面的回答所述！

編輯：

我在 github 上打開了一個問題：

https://github.com/niklasvh/html2canvas/issues/2254

Answer 1

 window.takeScreenShot = function() { html2canvas(document.body, { onrendered: function (canvas) { const b64 = canvas.toDataURL("image/png").replace(/.*,/, ''); console.log("data:image/png;base64, "+b64 ) //document.getElementById("test").src="data:image/png;base64, "+b64 } }); }

 #target{ width:300px; height:200px; background:blue; color:#fff; padding:10px; } button{ display:block; height:20px; margin-top:10px; margin-bottom:10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <div id="target"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim. </div> <button onclick="takeScreenShot()">to image</button>

Answer 2

也許你應該試試這個： https://ekoopmans.github.io/html2pdf.js/

html2pdf.js 使用 html2canvas 和 jsPDF 將任何 web 頁面或元素轉換為完全客戶端的可打印 PDF。

我試過了，我在輸入表單上工作得很好（雖然不是范圍類型）。