从 html 创建的图像未正确放置在画布上答案

【问题标题】：Image created from html is not placed properly on canvas从 html 创建的图像未正确放置在画布上
【发布时间】：2019-04-18 03:20:12
【问题描述】：

我正在使用 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

【问题讨论】：

标签： javascript html canvas jspdf html2canvas

【解决方案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>

【讨论】：