html2canvas在角4

Question

我能够采取使用html2canvas在角4的截图，但我需要使用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>

服务THA TI打电话做后

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

我无法访问AddImagesResource（）函数html2canvas

可以请你告诉我如何实现以上功能

Answer 1

在为Angular提供承诺的回调时，应该使用arrow function而不是匿名函数。箭头函数能够正确地绑定到当前上下文，所以您正在尝试调用的函数将可以访问。

试试这个：

pdfDownload() { 
    html2canvas(document.body).then(canvas => { 
     var imgData = canvas.toDataURL("image/png"); 
     this.AddImagesResource(imgData); 
     document.body.appendChild(canvas); 
    }); 
}