如何将div转换为图像? [英] How to convert div to image?

问题描述

我有一个div，我需要制作该div的图像并发送到服务器.有什么方法可以使用Angular 7做到这一点?我试图搜索图书馆，但没有结果.所有解决方法都使用本机JS.

I have a div and I need to make an image of this div and send to a server. Is there any ways to do it using Angular 7? I tried to search for libraries but no results. All workarounds are using native JS.

推荐答案

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

To save HTML content into Image you need to use HTML2CANVAS library

创建一些参考孩子

@ViewChild('screen')屏幕:ElementRef;@ViewChild('canvas')canvas:ElementRef;@ViewChild('downloadLink')downloadLink:ElementRef;

当然，您需要添加HTML引用

of course, you need to add HTML reference like

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

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

然后创建一个制作图像的功能

then create a function to make image

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

}

工作Stackblitz

这篇关于如何将div转换为图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！