Question

我想使用HTML2Canvas来获取jQuery可选列表的屏幕截图（base64表示）。但是，似乎无法解释jQuery元素。

这就是我拍摄截图的方式。

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

它适用于获取常规HTML元素的屏幕截图，因此我不确定现在该做什么。

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

Answer 1

出于某种原因，target div需要一些文本，所以，我放了一个空格 。

更新：查看@ karthick的回答

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使用element.getComputedStyle（）计算元素的样式。

您正在使用的#target元素没有任何高度。因此，在画布渲染过程中，它会将高度计算为0.因此，您无法查看任何数据。

尝试为其设置最小高度。那应该解决这个问题。您还应指定适当的宽度，否则数据将无法完全捕获。

#target {
      min-height:300px;
}

或者

更新更清洁的方式，清除您在#selectable中使用的浮动。

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

如何使用HTML2Canvas为jQuery元素截取屏幕截图？

2 个答案: