Canvas Element zu div hinzufügen - Angular 4 - html5, eckig, Canvas

Ich habe eine eckige 4 Anwendung. In einem meiner Szenarien laden Benutzer TIFF-Dateien auf den Server hoch. Um die Vorschau der Datei im Browser anzuzeigen, verwende ich Tiff.js Bibliothek, um ein HTML-Canvas-Element zu generieren. Es scheint, dass alles gut für das Codeteil unten funktioniert. Ich bekomme das Canvas-Objekt erfolgreich.

this.image = myReader.result;
var tiff = new Tiff({buffer: loadEvent.target.result});
var canvas = tiff.toCanvas();
//document.body.append(canvas);
this.tiffCanvas = canvas;

Aber ich habe Schwierigkeiten, mein Canvas-Element auf der Seite zu zeigen. Hier ist mein HTML:

<div id="tiffCanvasContainer" [innerHtml]="tiffCanvas"></div>

Es druckt nur [object HTMLCanvasElement] auf die Seite. Wie kann ich den generierten Canvas auf meiner Seite erfolgreich anzeigen?

Antworten:

// your component.ts
import { ViewChild, ElementRef, OnInit ... } from "@angular/core";

@Component({...})
export class Component implements OnInit {
@ViewChild("tiffCanvasContainer") public tiffCanvasContainer: ElementRef;
public tiffCanvas: HTMLCanvasElement; // your canvas element

public ngOnInit() {
this.tiffCanvasContainer.nativeElement.appendChild(this.tiffCanvas);
}
}


<div #tiffCanvasContainer>...</div> // your template