将画布元素添加到 div 中 - Angular 4

Question

我有一个 Angular 4 应用程序，在其中一个场景中，用户将 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]。我该如何成功地在我的页面上显示生成的画布？

- xkcd

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

- Efe

---

谢谢你的答案 - xkcd

我很高兴能够帮助到你。 - Efe