Question

我试图使用html2canvas。我需要抓住一个特定的div并将它添加到正文中。

来自官方网站的代码可以作为演示工作。但当我尝试选择我的div时，没有任何反应。

这是什么工作

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 500,
  height: 500
});

并且这里有什么不起作用

html2canvas($("#div_name"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 500,
  height: 500
});

我做错了什么？ TY

达

 <div id="dsf" class="sdf">
   <%= render "share_form" %>
 </div>

达

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
html2canvas($("#dsf"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});
</script>

如果我使用document.body，则可以使用$( document ).ready(function() {

Answer 1

试

＆＃13;

html2canvas(document.getElementById("div_name"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 500,
  height: 500
});

＆＃13;

并确保您拥有id为div_name的div

Answer 2

您必须在加载文档时执行脚本。所以你必须替换

<script type="text/javascript">
html2canvas($("#dsf"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});
</script>

与

<script type="text/javascript">
$(document).ready(function () {
  html2canvas($("#dsf"), {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    }
  });
});
</script>

（有关详细信息，请参阅http://learn.jquery.com/using-jquery-core/document-ready/）

如何用html2canvas抓取div？

2 个答案: