CODEWITHSUNDEEP
javascriptcssscreenshothtml2canvas
Qarchli Ismail
Qarchli Ismail

Reputation: 157

I want to take a screenshot of a div using Html2canvas

I am using the Html2canvas in order 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 the following image shows: Form

I changed the ID of the element to be captured to 'table' so that I can screenshot the table only. But it seems like the screenshot takes only half of the targeted 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

Upvotes: 5

Views: 7657

Answers (1)

zer00ne
zer00ne

Reputation: 43880

I made a function that can adjust the output by 1 to 200% of the window height and width. To get your part working, I did the following:

  ....
    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);
        },....

Snippet

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>

Upvotes: 1

Related Questions