從html創建的圖像未正確放置在畫布上

Question

我正在使用html2canvas.js從html截屏，而使用jspdf.js截取pdf。 我的HTML如下

<div id="panel-item-all-annotations">
   <div class="panel-body" id="" style="width: 100%;">
         {{--some html with image--}}
   </div>
</div>
<canvas width="800" height="500" style="display: block;"></canvas>

我正在使用畫布通過如下所示的JS代碼放置div＃panel-item-all-annotations的圖像

html2canvas(document.querySelector("#panel-item-all-annotations"), {canvas: canvas}).then(function(canvas) {
        console.log('Drew on the existing canvas');
});

但是，它無法在畫布上正確放置圖像。 它將其放置在畫布的底部和右側，如下所示

html2canvas.js網址： https ：//html2canvas.hertzen.com/ jspdf： https ： //github.com/MrRio/jsPDF

Answer 1

我不確定為什么要對您這樣做。 肯定還有其他事情正在發生。 將其分解為超簡單的東西似乎可行。 這里有一個例子：

https://lab-keqpanlmmw.now.sh

這是代碼，但不會在StackOverflow上運行。

 function go() { let input = document.querySelector("#input"); let output = document.querySelector("#output"); html2canvas(input, { canvas: output }); } 

 #input { background-color: orange; color: white; padding: 1em; font-family: sans-serif; max-width: 200px; } #output { border: 1px solid black; width: 300px; height: 200px; margin-top: 1em; } 

 <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <div id="input"> {{--some html with image--}} </div> <div> <button onclick="go()">Go</button> </div> <div> <canvas id="output"></canvas> </div>