使用Html2canvas截取一个div的屏幕截图

Question

使用Html2canvas截取一个div的屏幕截图

5

我正在使用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的一半（高度方面）。

现在当我选择整个body时：

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

结果如下：

- Qarchli Ismail

你能发一个 Fiddle 吗？它在我这里运行良好。 - repzero

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Accepted Answer

我编写了一个函数，可以将输出调整为窗口高度和宽度的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);
        },....

片段

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;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>34571073</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>

<body>
  <header id="panel">
    <fieldset>
      <legend>HTML2Canvas</legend>
      <label for="w">Width.:
        <input id="w" type="number" min="1" max="200" />%</label>
      <br/>
      <label for="h">Height:
        <input id="h" type="number" min="1" max="200" />%</label>
      <br/>
      <input type="button" value="Capture" onclick="hide('#panel'); screenShot();" />
    </fieldset>
  </header>
  <main>
    <section id="sec1"></section>
    <section id="sec2"></section>
    <section id="sec3"></section>
  </main>
</body>

</html>