我可以在 Angular 4 中使用 html2canvas 截取屏幕截图，但我需要使用 http post 调用将字符串图像发送到服务器端
成分
import { Component, OnInit, NgZone } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { EventsEmitter } from '../../assets/scripts/services/eventsEmitter';
import { WindowRef } from '../../assets/scripts/services/window';
import { ImagesService } from '../images/images.component.service';
import { DomSanitizer } from '@angular/platform-browser';
import * as html2canvas from "html2canvas";
@Component({
selector: 'categories',
templateUrl: 'app/components/view/view.component.html',
styleUrls: ['app/components/view/view.component.css'],
providers: [ImagesService]
})
export class ViewComponent {
constructor(
private route: ActivatedRoute,
private router: Router,
private imagesService: ImagesService,
private eventsEmitter: EventsEmitter
private sanitizer: DomSanitizer,
private window: WindowRef) {
this.window.nativeWindow.scrollTo(0, 0);
}
ngOnInit() {
}
pdfDownload() {
html2canvas(document.body).then(function (canvas) {
var imgData = canvas.toDataURL("image/png");
document.body.appendChild(canvas);
});
}
AddImagesResource(query: any) {
this.imagesService.addCanvasResource(query)
.subscribe(response => {
this.eventsEmitter.broadcast('Success', 'Changes Saved Succesfully');
},
error => {
this.eventsEmitter.broadcast('Error', 'Error Occured');
});
}
}<a data-html2canvas-ignore (click)="pdfDownload()">screenshot</a>我打电话来发帖的服务
addCanvasResource(body: Object): Observable<any> {
let bodyString = JSON.stringify(body);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this.baseUrl + 'api/v3/images/AddCanvasImage', body, options)
.map((response: Response) => {
if (response.status < 200 || response.status >= 300) {
throw new Error('This request has failed ' + response.status);
}
else {
return response;
}
});
} I am unable to access AddImagesResource() function in html2canvas
你能告诉我如何实现上述功能吗
在 Angular 中为 Promise 提供回调时，您应该使用箭头函数 http://learnangular2.com/es6/arrow-functions，而不是匿名函数。箭头函数正确绑定到当前上下文，因此您尝试调用的函数将是可访问的。
试试这个：
pdfDownload() {
html2canvas(document.body).then(canvas => {
var imgData = canvas.toDataURL("image/png");
this.AddImagesResource(imgData);
document.body.appendChild(canvas);
});
}