以角度 2 从 html2canvas 调用 Typescript 函数

Question

我在 Angular 2 中使用 html2canvas 来捕获网页，但我需要使用 webapi post call 将字符串图像发送到服务器端

imageDownload() {
    html2canvas(document.body).then(function (canvas) {
        var imgData = canvas.toDataURL("image/png");
        document.body.appendChild(canvas);
    });
}

我无法从 html2canvas 访问此打字稿功能，我如何访问此方法以将图像字符串发送到服务器端

AddImagesResource(image: any) {
    this.imagesService.addCanvasResource(image)
        .subscribe(response => {
            this.eventsEmitter.broadcast('Success', 'Changes Saved Succesfully');
        },
        error => {
            this.eventsEmitter.broadcast('Error', 'Error Occured');
        });
}

Answer 1

在 Package.json 中添加

"dependencies": {
"html2canvas": "0.5.0-beta4",
"@types/html2canvas": "0.5.32"
.......
}

运行 npm 安装。

您可能会遇到与 html2canvas not found 或 undefined 相关的错误。 用 systemjs 解决这个问题：

   map: {

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  ...............

  // other libraries
  'rxjs': 'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'html2canvas': 'npm:html2canvas' //for html canvas
 }
packages: {
  .................
   rxjs: {
     defaultExtension: 'js'
   },
   html2canvas: {
     main:'./dist/html2canvas.js',
     defaultExtension: 'js'
   }
 }

现在您将拥有 html2canvas 的完整参考。

我已将图像数据创建为图像的 dataURI 和 Blob 对象。

HTML：

 <div class="container" #container>    
   <img id="imgtag" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTexytN9PLhK7bFL-OofVQ9EYmXNhrZP9plY-_L6lKoycVmcjVw"
    alt="Smiley face" height="420" width="420">
   <div style="margin-top:20px;margin-left:20px">
    <button type="button" class="btn btn-secondary" (click)=snapShot()>Snap Shot</button>
   </div>
</div>

TypeScript 代码：

 import { Component, ViewChild, ElementRef } from '@angular/core';
 import * as html2canvas from 'html2canvas';
 export class AppComponent {
 @ViewChild('container') container: ElementRef;
 snapShot() {
     let dataURI = this.createThumbnail(this.container.nativeElement);
 }

createThumbnail(blockelement: any) {
let element = blockelement.querySelector('#imgtag');
console.log(element, 'element')
if (element !== null && element !== undefined) {
  html2canvas(element).then(function (canvas: any) {
    let dataURI = canvas.toDataURL();
    console.log('img', dataURI);

    let blobObject = this.dataURItoBlob(dataURI);
    console.log('img', blobObject);
    //this.AddImagesResource(blobObject) your case
    //AddImagesResource will call the service method which can
    //post this blob object as multipart file
    //this formdata and httppost call should in service layer,in your case its imagesService.
    /*
      let formData = new FormData();
      formData.append('file', blobObject);
      console.log(formData, 'formData');
      return this.http.post(API_URL.saveThumbnailURL, formData).map((res: Response) => {
      console.log(res);
      return res.json();
    })        */
     }.bind(this));
   }
 }
  dataURItoBlob(dataURI: string) {
  let byteString: any;
  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = decodeURI(dataURI.split(',')[1]);

  // separate out the mime component
  let mimeString: any = dataURI.split(',')[0].split(':')[1].split(';')[0];

  // write the bytes of the string to a typed array
  let blob: any = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    blob[i] = byteString.charCodeAt(i);
  }
  return new Blob([blob], {
    type: mimeString
  });
}
}

您可以使用 formdata 将此 stringdata/blob 对象作为多部分文件发送到服务器。

希望这会有所帮助

Answer 2

您可以在元素上使用（单击）事件并将功能分配给它，

 <button  (click)="AddImagesResource(img)"></button>

如果需要调用 ts 里面的函数，可以这样做，

this.AddImagesResource(imgData);

Answer 3

这就是 Angular 应用程序中的 Zone.js 的实际用途，您可以显式使用它来调用 Angular 应用程序。因此，在您的组件中，您将执行类似的操作：

export class AppComponent {

  constructor(private ngZone: NgZone) { }

  ngOnInit() {
    window['addImagesResource'] = (imgData) => {
      this.ngZone.run(() => {
        this.AddImagesResource(imgData);
      });
    };
  }

  /* omitted for brevity */
}

然后您可以从 html2canvas 调用 window.addImagesResource(imgData)，正如您所期望的那样，ngZone 应该会处理将其置于正确的上下文中。

编辑： 我创建了一个 plunker，它说明了如何使用按钮单击和普通的旧 javascript 代码来做到这一点。

https://embed.plnkr.co/erIdbP/