我想使用 Html2canvas 截取 div 的屏幕截图

Question

我正在使用 Html2canvas 来截取 div 的屏幕截图并将其显示在新窗口中。这是我的 JavaScript 函数

function capture() {
html2canvas(document.getElementById('screenshot'), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");    
window.open(img);
}}
);
}

这段代码的问题是它只捕获了 div 的一半，如下图所示：

我将要捕获的元素的 ID 更改为“table”，这样我就只能对表进行屏幕截图。但看起来屏幕截图只占据了目标 div 的一半（就高度而言）。

现在当我选择全身时：

function capture() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
}
});

结果如下：

Answer 1

我制作了一个函数，可以将输出调整为窗口高度和宽度的 1% 到 200%。为了让你的部分发挥作用，我做了以下工作：

  ....
    html2canvas(document.body, {
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
            canvas.id = "ctx"
            var ctx = document.getElementById('ctx');
            var img = ctx.toDataURL("image/png");    
            window.open(img);
        },....

片段

  ....
    html2canvas(document.body, {
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
            canvas.id = "ctx"
            var ctx = document.getElementById('ctx');
            var img = ctx.toDataURL("image/png");    
            window.open(img);
        },....

function hide(ele) {
  var ele = document.querySelector(ele);
  ele.style.display = 'none';
  setTimeout(function() {
    ele.style.display = 'block'
  }, 1000);
  return false;
}

function screenShot() {
  var w = document.getElementById('w');
  var h = document.getElementById('h');
  var winW = window.outerWidth;
  var winH = window.outerHeight;
  var width = parseFloat(w.value * winW * .01);
  var height = parseFloat(h.value * winH * .01);
  html2canvas(document.body, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
      canvas.id = "ctx"
      var ctx = document.getElementById('ctx');
      var img = ctx.toDataURL("image/png");
      window.open(img);
    },
    width: width,
    height: height
  });
  return false;
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: auto;
}
#panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 50px;
  z-index: 1;
}
fieldset {
  border-radius: 10px;
  background: hsla(120, 100%, 50%, .5)
}
legend {
  font: small-caps 700 20px/1.4'Source Code Pro';
}
section {
  height: 33vh;
  width: 100vw;
}
#sec1 {
  background: red;
  border: 1px solid blue;
}
#sec2 {
  background: white;
  border: 1px solid red;
}
#sec3 {
  background: blue;
  border: 1px solid white;
}