web-dev-qa-db-ja.com

angular 4のhtml2canvas

angular 4でhtml2canvasを使用してスクリーンショットを撮ることができますが、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>

投稿するために呼び出しているサービス

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

html2canvasのAddImagesResource（）関数にアクセスできません enter image description here

上記の機能を実現する方法を教えてください

angularhtml2canvas
9
Pein
pdfDownload() {
    let self = this;//use this variable to access your class members inside then().
    html2canvas(document.body).then(canvas => {
        var imgData = canvas.toDataURL("image/png");
        self.AddImagesResource(imgData);
        document.body.appendChild(canvas);
   });

}

1
Mam's

Angularでpromiseのコールバックを提供する場合は、匿名関数ではなく 矢印関数 を使用する必要があります。矢印関数は現在のコンテキストに正しくバインドされるため、呼び出そうとしている関数にアクセスできます。

代わりにこれを試してください：

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

Angular-cli.jsonのスクリプトリストにあるスクリプトを必ずインポートしてください

"scripts": [
"../node_modules/html2canvas/dist/html2canvas.min.js"
]

そしてクラスで：

import * as html2canvas from "html2canvas"
0
Zohab Ali