在 angular 2 打字稿中使用 html2canvas 裁剪图像

Question

我正在 angular 2

中使用 html2canvas 捕获网页屏幕

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


}

我想裁剪捕获图像的边框，因为屏幕截图也捕获了导航栏，我不希望这种情况发生。你能告诉我如何实现上述功能吗？

Answer 1

html2canvas(document.body)

将document.body改为

$("[CLASS OR ID]")

对于您需要快照的元素或部分元素！

在 angular 2 打字稿中使用 html2canvas 裁剪图像

crop image using html2canvas in angular 2 typescript

html

canvas

html2canvas

typescript

angular