求解！html2canvas截取input的问题，截图中input框里的文字内容向上偏移了

使用html2canvas截取带输入框的截图，发现截图的input框里面的内容发生了向上偏移

img

img

未发现你说的问题

img

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
    <style type="text/css">
    </style>
  </head>
  <body>
    <div id="box">
      <input type="text" style="height: 100px; line-height: 100px;" placeholder="请输入内容">
    </div>

    <button type="button" id="exportToPdf" onclick="btn()">html2canvas</button>

    <div id="target"></div>
    <script type="text/javascript">
      var target = document.getElementById('target')
      function btn() {
        html2canvas(document.getElementById("box"), {
          onrendered: function (canvas) {
            console.log(canvas);
            target.appendChild(canvas)
          }
        });
      }
    </script>
  </body>
</html>

可以去跟他们提个issue，然后等待他们解决，html2canvas是计算dom及其子节点样式，然后绘制到canvas上，最后导出canvas为图片的，计算样式这一点很复杂的也很容易出错的，需要考虑的方便比较多，比如不同浏览器不同版本，这里就是兼容性没考虑到input的placeholder的样式。

如果不等他们解决的话，你可以自己拿到他们的源码，自己修改，不会修改的话就在导出的时候用其他元素模拟这个input和他的placeholder，项目开发中这种性价比不高(功能性远小于开发难度)的功能点很多，要学会取舍，学会说服客户，一些小瑕疵不影响项目完成度

怎么使得截图与html的内容一致

我遇到了和你一样的问题