divへのcanvas要素の追加-Angular4

debugcn 投稿 Dev

アニルカ

私はAngular4アプリケーションを持っています。私のシナリオの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]ページに印刷するだけです。生成されたキャンバスをページに正常に表示するにはどうすればよいですか？

Efe

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]