angular - 从 Angular 2 中的 html2canvas 调用 Typescript 函数

Question

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

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

我无法从 html2canvas 访问此 typescript 函数，如何访问此方法以将图像字符串发送到服务器端

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 or 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 对象作为多部分文件发送到服务器。

希望对你有帮助