片段

Question

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

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

此代码的问题在于它仅捕获div的一半，如下图所示：

我将要捕获的元素的ID更改为＆＃39; table＆＃39;所以我只能截取表格。但似乎屏幕截图仅占目标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);
        },....

片段

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>

我想使用Html2canvas

1 个答案:

片段