How to remove certain elements before taking screenshot?

user566245 picture user566245 · Dec 15, 2013 · Viewed 12k times · Source

I am able to take screenshot of the page using the example code below:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

Now there are certain div's i dont want to be part of the page when I take the screenshot? How can i prevent them from being part of the screenshot.

One way I thought was to clone the element and then remove the elements, but taking a screenshot of the clone gives a white screen. Here is the code I used:

html2canvas($(document.body).clone()[0], {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

Answer

user566245 picture user566245 · Dec 19, 2013

Add this attribute: data-html2canvas-ignore to any element you don't want to be taken when the screenshot is processed.

Hopefully this will help the next guy.