crop image using html2canvas in angular 2 typescript

Question

I am capturing the web page screen using html2canvas in angular 2

import { Component, OnInit, NgZone } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import * as html2canvas from "html2canvas";


@Component({
    selector: 'test',
    templateUrl: 'app/components/view/view.component.html',
    styleUrls: ['app/components/view/view.component.css']
})
export class ViewComponent {
    
   

    constructor(
        private sanitizer: DomSanitizer,
        private window: WindowRef) {
    }

    ngOnInit() {
      this.pdfDownload();
    }

    pdfDownload() {
        html2canvas(document.body).then(function (canvas) {
            var imgData = canvas.toDataURL("image/png");
        });
    }


}

I would like to crop the borders of the captured image because the screen shot is also capturing the navbar and dont want that to happen. can you let me know how to achieve the above functionality?

Answer 1

html2canvas(document.body)

Change document.body with

$("[CLASS OR ID]")

for the element or partial element you need the snapshot!