angular - 如何将div转换成图片？

Question

我有一个 div，我需要制作这个 div 的图像并发送到服务器。有什么方法可以使用 Angular 7 来实现吗？我试图搜索图书馆但没有结果。所有解决方法都使用原生 JS。

Answer 1

要将 HTML 内容保存到图像中，您需要使用 HTML2CANVAS 库

创建一些引用 child

@ViewChild('screen') 屏幕:ElementRef；
@ViewChild('canvas') Canvas :ElementRef；
@ViewChild('downloadLink') 下载链接:ElementRef;

当然，你需要像这样添加HTML引用

<table #screen id="table" class="table table-striped">...

<div id="download">
  <img #canvas>
  <a #downloadLink></a>
</div>

然后创建一个函数来制作图像

downloadImage(){

html2canvas(this.screen.nativeElement).then(canvas => {
      this.canvas.nativeElement.src = canvas.toDataURL();
      this.downloadLink.nativeElement.href = canvas.toDataURL('image/png');
      this.downloadLink.nativeElement.download = 'marble-diagram.png';
      this.downloadLink.nativeElement.click();
});

}

Working Stackblitz