divにキャンバス要素を追加する - 角4

Question

角4のアプリケーションがあります。私のシナリオの1つで、ユーザーはtiffファイルをサーバーにアップロードします。ブラウザでファイルのプレビューを表示するには、Tiff.jsライブラリを使用してHTMLキャンバス要素を生成しています。下のコードではすべて正常に動作するようです。私はキャンバスオブジェクトを正常に取得しています。

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

しかし、キャンバス要素をページに表示するのは難しいです。ここに私のhtmlがあります：

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

ただページに[object HTMLCanvasElement]を印刷します。 生成されたキャンバスをページに正しく表示するにはどうすればよいですか？

Answer 1

// 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