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

Question

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

这就是我截图的方式。

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

它适用于截取常规 HTML 元素的屏幕截图，所以我不确定现在该怎么做。

这是JSFiddle，请确保打开控制台。

Answer 1

html2canvas 通过使用 element.getComputedStyle(( 计算元素的样式来工作。

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

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

#target {
      min-height:300px;
}

或

更新更干净的方式，清除您在 #selectable 中使用的浮点数。

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

Answer 2

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

更新：看看@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>