Calling Typescript function from html2canvas in angular 2

Question

I am using html2canvas in angular 2 to capture the webpage but i need to send the string image to the server side using a webapi post call

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

I am unable to access this typescript function from html2canvas,how can i access this method to send the image string to the server side

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

add in Package.json

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

run npm install.

you might encounter the error related html2canvas not found or undefined. to solve this with 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'
   }
 }

now you will have the complete reference of html2canvas.

i have created the imagedata as dataURI and Blob object of the image.

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 Code:

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

you can send this stringdata/blob Object to server as multipart file using formdata.

Hope this will help