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

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

html2canvas 的工作原理是使用 element.getCompulatedStyle() 计算元素的样式。

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

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

#target {
      min-height:300px;
}

或者

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

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