Div में कैनवास तत्व जोड़ना - कोणीय 4 - एचटीएमएल 5, कोणीय, कैनवास

मेरे पास एक कोणीय 4 अनुप्रयोग है। मेरे परिदृश्यों में से एक उपयोगकर्ता सर्वर पर टिफ फाइल अपलोड करता है। ब्राउज़र में फ़ाइल का पूर्वावलोकन दिखाने के लिए, मैं उपयोग कर रहा हूँ Tiff.js एक एचटीएमएल कैनवास तत्व उत्पन्न करने के लिए पुस्तकालय। ऐसा लगता है कि सब कुछ नीचे कोड टुकड़े के लिए ठीक काम करता है। मैं कैनवास ऑब्जेक्ट सफलतापूर्वक प्राप्त कर रहा हूं।

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

लेकिन मुझे पृष्ठ में अपना कैनवास तत्व दिखाने पर कठिनाइयां हैं। यहां मेरा एचटीएमएल है:

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

यह सिर्फ प्रिंट करता है [object HTMLCanvasElement] पेज पर मैं अपने पृष्ठ में जेनरेट किए गए कैनवास को सफलतापूर्वक कैसे दिखा सकता हूं?

उत्तर:

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