javascript - Angular 2 中带有 Html2canvas 的“display”：“none”div 的屏幕截图

Question

在我的 Angular 2 应用程序中，我需要截取隐藏 div 的屏幕截图。我希望 div 'display':'none'不会干扰我的 DOM。

Html2canvas 提供了一个onclone克隆 div 并让更改 css 的选项：

onclone: function(doc){
    hiddenDiv = doc.getElementById('myDiv');
    hiddenDiv.style.display = 'block';
}

我在我的项目中这样设置它：

#css

.answer-card {
  height: 250px;
  width: 350px;
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: center;
  display: none;
}

<>html

<div id="answer">
   <div class="answer-card" [ngStyle]="{'background-image': 'url(' + getBackImg() + ')' }">
      <img crossorigin="anonymous" [src]="poster" alt="">
   </div>
   <h3>Black Widow</h3>
</div>

TS

export class AppComponent {

  poster = 'https://image.tmdb.org/t/p/w500/qAZ0pzat24kLdO3o8ejmbLxyOac.jpg';

  getBackImg() {
    return 'https://image.tmdb.org/t/p/w1280/dq18nCTTLpy9PmtzZI6Y2yAgdw5.jpg';
  }


  generateAnswer() {
    html2canvas(document.getElementById('answer'), {
      onclone: function(doc) {
        doc.getElementById('answer').style.display = 'flex';
      },
      allowTaint: true
    }).then(canvas => {
      document.body.appendChild(canvas);
    });
  }
}

这是我在 StackBlitz 中的问题的一个工作示例，另一个示例是 Html2canvas 屏幕截图，没有onclone选项。

标签： javascriptcssangularhtml2canvas