在帶有角度的圖像中繪製圖像2

我正在開發使用角度爲2的應用程序。在我的應用程序中，我正在上傳圖像。在這個圖像中，我需要標記或繪製圖像的特定部分。這是可能的角2。我沒有找到任何解決方案。我需要像在Windows中繪製應用程序一樣繪製圖像。在帶有角度的圖像中繪製圖像2

請幫忙!!

2017-06-19 user3541485

你可以假設一切你可以用JavaScript做什麼，你也可以做角度或其他框架。最後，Angular只是一個JavaScript框架。 – Hitmands

我在問這個問題的任何可能性。或者其他解決方案。請建議 – user3541485

https://stackoverflow.com/questions/10324949/draw-on-top-of-an-image-in-html-javascript – Hitmands

是的，你可以通過使用畫布。這裏舉個例子：

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

來源

2017-12-01 18:54:15

在帶有角度的圖像中繪製圖像2

回答

相關問題