我如何使用角度从服务器加载的图像捕获屏幕答案

【问题标题】：How i can capture the screen with an image that loaded from server using angular我如何使用角度从服务器加载的图像捕获屏幕
【发布时间】：2020-09-19 19:46:08
【问题描述】：

如何使用从服务器加载的图像捕获屏幕。现在我可以只使用从后端加载的文本数据来捕获屏幕，但是图像丢失了。

注意：我可以从后端加载文本和图像。但是这段代码无法捕获图像

这是 HTML 代码

<div #screen id="cards">
<div class="row justify-content-center">
<div class=" col-12 col-md-6 box mt-4">
<img class="img-layer" src="{{url}}/xxxx/xxxx/{{xxxxx}}/xxxx/front.jpg" style="height: 100%; width: 
100%; border: 1px solid black;">
<div class="row  justify-content-center avatar">
<div class="col-md-8 text-center d-flex">
<img src="{{url}}/xxxxx/profile/{{xxxxxxx}}/student/{{xxxxxx}}.jpg" style="height: 200px; width: 
200px; border-radius: 5px;">
</div>
</div>

<div class="row mt-7 clg-details space">{{aaaa}}</div>
<div class="row">{{aaaa}}</div>
<div class="row">{{aaa}}</div>
<div class="row">{{aaaa}}</div>
</div>
</div>
<div id="download">
<img #canvas>
<a #downloadLink></a> 
</div>

这是 TS 代码

@ViewChild('screen', { static: false }) screen: ElementRef; 
@ViewChild('canvas', { static: false }) canvas: ElementRef;
@ViewChild('downloadLink', { static: false }) downloadLink: ElementRef;

captureImage() {
console.log((this.screen.nativeElement));
html2canvas(this.screen.nativeElement).then(canvas => {
this.canvas.nativeElement.src = canvas.toDataURL();
this.downloadLink.nativeElement.href = canvas.toDataURL('image/png');
this.downloadLink.nativeElement.download = 'id-card.png';
this.downloadLink.nativeElement.click();
}); 
}

This is the image what I need after render and save

This is the image that I get. note that background image is missed

【问题讨论】：

标签： javascript html angular typescript angular8

【解决方案1】：

首先你需要在前端创建一个img [src] 的值。例如<img [src]="myImage">在您的 HTML 中。

在组件中：

 myImage : any;
     createImage(image : blob){
     let reader = new FileReader();
     reader.addEventListener("load" => {
     this.myImage = reader.result;
}, false);
if(image){
 reader.readAsDataURL(image);
}
}

假设您从后端获取 blob。

【讨论】：