How to remove certain elements before taking screenshot?

Question

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 1

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.

Answer 2

When I used this library I faced a problem that the lib download all the images in my application, that cause the application to run slowly. I resolved the problem using the ignoreElements option. This is my code:

  var DropAreaElement= document.getElementById("123");
    var config= {
        useCORS: true,
        ignoreElements: function (element) {
            if (element.contains(DropAreaElement) || element.parentElement.nodeName =="HTML" || element == DropAreaElement || element.parentNode == DropAreaElement) {
                console.log("elements that should be taken: ", element)
                return false;
            }else {
                return true;
            }
        }
    };
    html2canvas(DropAreaElement, config).then(function (canvas){
        var imgBase64 = canvas.toDataURL('image/jpeg', 0.1);
        console.log("imgBase64:", imgBase64);
        var imgURL = "data:image/" + imgBase64;
        var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_" + new Date().getTime() + ".jpeg").appendTo("body");
            triggerDownload[0].click();
            triggerDownload.remove();
    }).catch(Delegate.create(this, function (e){
        console.error("getLayoutImageBase64 Exception:", e);
    });

Answer 3

If you don't want to use an attribute, html2canvas does provide a method to remove elements. For example:

html2canvas( document.body, {
    ignoreElements: function( element ) {
        
        /* Remove element with id="MyElementIdHere" */
        if( 'MyElementIdHere' == element.id ) {
            return true;
        }
        
        /* Remove all elements with class="MyClassNameHere" */
        if( element.classList.contains( 'MyClassNameHere' ) ) {
            return true;
        }
        
    }
} ).then( function( canvas ) {
    document.body.appendChild( canvas );
} );

For more information, see html2canvas options.