將畫布元素添加到div-Angular 4

Question

我有一個角度4應用程序。 在我的一種情況下，用戶將tiff文件上傳到服務器。 為了在瀏覽器中顯示文件的預覽，我使用了Tiff.js庫來生成html canvas元素。 似乎對於以下代碼段，一切正常。 我成功獲取了畫布對象。

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

但是我很難在頁面上顯示我的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