如何使用html2canvas抢div？

Question

I'm trying to use html2canvas. I need to grab a specific div and add it to the body.

The code from official site works fine as a demonstration. But When I try to select my div, nothing happens.

Here's what's working

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

and here's what's not working

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

what am I doing wrong? ty

up

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

up

<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>

if I use document.body it works both with or withour $( document ).ready(function() {

Answer 1

try

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

and make sure you have a div with an id of div_name

Answer 2

You have to execute the script when the document is loaded. So you have to replace

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

with

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

(For more information see http://learn.jquery.com/using-jquery-core/document-ready/ )