div에 각도 캔버스 요소 추가 - 각도 4

Question

각도 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]을 인쇄합니다. 생성 된 캔버스를 내 페이지에 성공적으로 표시하려면 어떻게해야합니까?

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