current position:Home>Html2canvas problem

Html2canvas problem

2022-05-15 02:13:24Maple moving forward

1. The intercepted content contains pictures , And the picture itself or the outer box is set with width and height , So before interception html2canvas The picture will be 100% Fill the outer box , So after the screenshot, the picture will deform

<div class="img-wrap" id="hh">
  /><img *ngIf="poster" [src]="poster" alt="" />

<button (click)="makePoster()" nz-button nzType="primary" n> Screenshot </button>

export class AppComponent {
  poster = '';
  ngOnInit() {

  makePoster() {
    html2canvas(document.getElementById('hh'), {
      useCORS: true,
      logging: false,
      backgroundColor: null,
    }).then((canvas) => {
      this.poster = canvas.toDataURL();

 Before screenshot


 After screenshot


2. When the intercepted content contains single line or multi line overflow dot , Overflow dot failure , text truncated

 Before screenshot



3. Only the contents of the visual area of the screen can be intercepted , The content outside the visual area cannot be intercepted


copyright notice
author[Maple moving forward],Please bring the original link to reprint, thank you.

Random recommended