All geek questions in one place

I want to take a screenshot with html2canvas

I am using Html2canvas to take a screenshot of a div and display it in a new window. Here is my javascript function

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

The problem with this code is that it captures only half of the div, as shown in the following figure: The form

I changed the identifier of the element to be captured to a “table” so that I can only reduce the screen table. But it looks like the screenshot only takes up half the target div (in terms of height). Table only

Now when I select the whole body:

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

The result is as follows: Body

+4
source share
1 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>
Hide result
0

Source: https://habr.com/ru/post/1622549/

More articles:


All Articles