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

Humber

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.

Humber

or you can hide those div using jquer/javascript before calling html2canvas function then show then in between that function. – Lagrange

paa g is it working for pages with scroll? I am trying to do it as i have div which is to be convert into canvas it contains scroll but it is only converting those elements that are visible on screen in other words it is taking screen shot.... is there a way to take whole page screen shot??? – Lagrange

I am getting the whole page, not just visible area. – Humber

Also helping next guy: "Add attribute to element" specifically means <div data-html2canvas-ignore="true"> Hidden in pdf </div>. – Sherrilsherrill

data-html2canvas-ignore="true" – Soutane

is there a way to ignore elements via query selector? I've found that it has ignoreElements property, but I don't know how to use it properly. – Tiphani

Thanks @Humber and VirgeAssault Its working fine for me. – Ridgeling

ignoreElement.setAttribute('data-html2canvas-ignore','true'); – Coon

Bless you all! This really helped! :D – Equanimity

Answer 2

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.

Africander

Answer 3

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

Rhiana

Answer 4

You can create HOC for <Printable/> and <NonPrintable/> , you can wrap your component with <NonPrintable><YourCoolComponent/></NonPrintable> those children components would be excluded.

import React from "react"

interface INonPrintable {
  children: React.ReactChildren
}

/*
HOC - Printable which injects the printId to the React component
which gets us Printable Context to html2canvas => jsPDF
eg:
 <Printable printId="about-you-print">
    <PersonalInfo badEmail={badEmail} />
    <IdentityInfo />
    <AdditonalInfo />
    <AddressInfo
     serviceAddress={serviceAddress}
     billingAddress={this.state.billingAddress}
     setBillingAddress={this.setBillingAddress}
    />
</Printable>

*/
export default function Printable({ printId = "", children, ...restProps  }) {
  return <div print-id={printId} {...restProps}>{children}</div>
}


/*
HOC - NONPrintable which injects the data-html2canvas-ignore to the React component
which gets us Printable Context to html2canvas => jsPDF
eg:
<NonPrintable style={{display:"flex",justifyContent:'space-around'}}>
  <Button
    text="Print PDF using Own utility"
    onClick={this.handlePrintPdf}
    />
    <Button
    text="Print PDF using html2canvas + jsPDF"
    onClick={this.handlePrintwithPDFjs}
    />
</NonPrintable>
*/

export const NonPrintable = ({ children, ...restProps }) => {
  return <div data-html2canvas-ignore {...restProps}>{children}</div>
}

Gaynor