我有一个 div,我需要制作这个 div 的图像并发送到服务器。有什么方法可以使用 Angular 7 来实现吗?我试图搜索图书馆但没有结果。所有解决方法都使用原生 JS。
最佳答案
要将 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();
});
}
关于angular - 如何将div转换成图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56830595/