角度2の画像で描画する

Question

角度2を使用してアプリケーションを開発しています。私のアプリケーションでは、画像をアップロードしています。この画像では、私はマーキングする必要がありますまたは特定のセクションの画像を描く必要があります。角度2で可能です。私はこれのための解決策を見つけることができませんでした。私はウィンドウのペイントアプリケーションのようにイメージを描画する必要があります。

助けてください！

Answer 1

はい、キャンバスを使用するとできます。ここでは例：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; 

@Component({ 
    selector: "canvas-component" 
    ,templateUrl: "./canvas.template.html" 

}) 

export class CanvasScene implements AfterViewInit, IScene { 


    //Loading Canvas and Images html elements  
    @ViewChild('myCanvas') canvasRef: ElementRef; 
    @ViewChild('bubbleimg') bubble_img: ElementRef 

    //Canvas Context 
    ctx: CanvasRenderingContext2D; 

    ngOnInit() {  
     this.ctx = this.canvasRef.nativeElement.getContext('2d'); 
     this.paint(this.ctx); 
    } 

    paint(ctx) {   

    ctx.drawImage(this.bubble_img, 0, 0, 70, 50); 
    //FrameRate To Repaint 
    setTimeout(() => 
    { 
     this.paint(ctx); 
    }, 
    100); 
    } 

HTMLコード

<canvas #myCanvas style="width:100%" >  

</canvas> 

<img #bubbleimg src="assets/bubble.png">