title: html2canvas in angular 4
body: <p><strong>I am able to take a screenshot using html2canvas in angular 4 but i need to send the string image to the server side using a http post call</strong></p>
  
  <blockquote>
    <p>Component</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
                  this.eventsEmitter.broadcast('Success', 'Changes Saved Succesfully');
              },
              error =&gt; {
                  this.eventsEmitter.broadcast('Error', 'Error Occured');
              });
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a data-html2canvas-ignore (click)="pdfDownload()"&gt;screenshot&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Service that i am calling to do a post</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> addCanvasResource(body: Object): Observable&lt;any&gt; {
          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) =&gt; {
                  if (response.status &lt; 200 || response.status &gt;= 300) {
                      throw new Error('This request has failed ' + response.status);
                  }
                  else {
                      return response;
                  }
              });
      }  </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>I am unable to access AddImagesResource() function in html2canvas</strong>
  <a href="https://i.stack.imgur.com/k3fAV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/k3fAV.png" alt="enter image description here"></a></p>
  
  <p><strong>can you please tell me how to achieve the above functionality</strong></p>