使用 html2canvas 將 HTML 轉換為圖像

Question

我開發了一個包含文本的簡單div元素。

我嘗試使用html2canvas將html轉換為PNG並將其輸出為另一個圖像中的圖像。 在我的本地服務器上運行它時，渲染已根據 console.log 成功初始化

118ms html2canvas: Canvas renderer initialized (1350x18 at 8,8) with scale 1

但是輸出圖像沒有附加在分配的div元素中。

任何幫助將非常感激！

爪哇腳本

 function myFunction () { html2canvas(document.getElementById("hi"), { onrendered: function(canvas) { theCanvas = canvas; document.body.appendChild(canvas); // Convert and download as image Canvas2Image.saveAsPNG(canvas); document.getElementById("img-out").append(canvas); } }); }

HTML

<html>
   <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
   <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

  <body onload="myFunction()">
    <div id ="hi">
      Hi There !
    </div>
    </br></br></br></br></br></br>
    <div id="img-out"></div>
  </body>
</html>

Answer 1

您可以將畫布作為圖像源並在您的頁面上顯示圖像。 請注意，如果您使用的是最新版本的 html2canvas 庫，則不推薦使用“onrendered”功能。 請改用以下腳本

function myFunction (){
    html2canvas(document.querySelector("#hi")).then(canvas => {
        document.body.appendChild(canvas);
        var img = document.createElement("img"); // create an image object
            image.src = canvas.toDataURL(); // get canvas content as data URI
        document.getElementById('img-out').appendChild(image); 
    });
}

使用 html2canvas 將 HTML 轉換為圖像

問題描述

1 個解決方案

解決方案1
0 2019-03-14 02:24:24

使用 html2canvas 將 HTML 轉換為圖像

問題描述

1 個解決方案

解決方案1 0 2019-03-14 02:24:24

解決方案1
0 2019-03-14 02:24:24