How do I take a screenshot using HTML2Canvas for a jQuery element?

Question

I'd like to use HTML2Canvas to take a screenshot (base64 representation) of a jQuery selectable list. However, it seems to be unable to interpret the jQuery element.

This is how I'm taking the screenshot.

    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            var dataURL = canvas.toDataURL();
            console.log(dataURL);
        }
    });

It works for taking a screenshot of a regular HTML element so I'm not sure what to do now.

Here is the JSFiddle, make sure to open your console.

Answer 1

For some reason the target div needs some text inside of it, so, I've put a space  .

UPDATE: Look at the @karthick's answer

var fin = document.getElementById("finalize");

var createCanv = function(e) {
  html2canvas(document.getElementById("target"), {
    onrendered: function(canvas) {
      var dataURL = canvas.toDataURL();
      console.log(dataURL);
    }
  });

}

fin.addEventListener('click', createCanv)

//This is the test version

var testButton = document.getElementById("Test");

var testcreateCanv = function(e) {
  html2canvas($('#target'), {
    onrendered: function(canvas) {
      var dataURL = canvas.toDataURL();
      $('img').attr('src', dataURL);
    }
  });

}

testButton.addEventListener('click', testcreateCanv);

var tableCount = 0;
      var patronCount = 0;

      $(function() {

        $("#selectable").selectable({

          stop: function() {

            $(".ui-selected").selectable({
              disabled: true
            });
            $(".ui-selected").selectable("option", "disabled", true);

            tableCount += 1;

            var len = 0;
            var result = $("#select-result").empty();
            $(".ui-selected", this).each(function() {
              var index = $("#selectable li").index(this);
              result.append(" #" + (index + 1));
              len += 1;
            });

            $(".ui-selected").css("background-color", "red");

            $(".ui-selected").html(tableCount);



            var log = $("#select-log");
            $(".ui-selected", this).each(function() {
              var index = $("#selectable li").index(this);
              log.append("Added table " + tableCount + " of " + len + " consisting of Seat " + (index + 1) + " With " + patronCount + " People" + "<br>");
              return false;
            });
          }
        });
      });
      
      $(document).ready(function() {
        $(":enabled").css("border", "3px solid green");
        $(".ui-selected").selectable({
          disabled: true
        });
        $(".ui-selected").selectable("option", "disabled", true);
      });

      #feedback {
        font-size: 1.4em;
      }
      
      #selectable .ui-selectee {
        background: #0000ff;
        color: #7FFF00;
      }
      
      #selectable .ui-selecting {
        background: #000000;
        color: #white;
      }
      
      #selectable .ui-selected {
        background: #ff0000;
        color: white;
      }
      
      #selectable {
        list-style-type: none;
        margin: 10;
        padding: 10;
        width: 900px;
      }
      
      #selectable li {
        margin: 3px;
        padding: 1px;
        float: left;
        width: 100px;
        height: 80px;
        font-size: 4em;
        text-align: center;
      }

      #target {
          min-height:300px;
      }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<br>
    <div id="target">

      <ol id="selectable">
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
        <li class="ui-widget-content"></li>
      </ol>

    </div>



    <button id="finalize"> Finalize </button>
    <br>
    <div id="target2">
      test screenshot
    </div>
    <button id="Test"> Test </button>


<div>
    <h1>Imgage</h1>
    <img src="" alt="" />
</div>

Answer 2

html2canvas works by computing the style of the element using, element.getComputedStyle().

The #target element that you are using doesn't have any height to it. So during the canvas rendering it computes the height to 0. So you won't be able to see any data.

Try setting a min-height to it. That should solve the issue. You should also specify proper width otherwise the data wont be captured completely.

#target {
      min-height:300px;
}

Or

Update much cleaner way, clear the float that you are using in #selectable.

   #selectable:after{
     content: "";
      display: block; 
      clear: both;
   }