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="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3609241929,573960707&fm=26&gp=0.jpg"
    alt=""
  /><img *ngIf="poster" [src]="poster" alt="" />
</div>

<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();
      console.log(canvas);
    });
  }
}

 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.
https://en.qdmana.com/2022/132/202205120524480301.html

Random recommended