Drawing in image with angular 2

Question

I am developing application using angular 2. In my application i am uploading images. In this images i need to mark or draw in images particular section.Is it possible with angular 2. I didn't find any solution for this. I need to draw in images just like paint application in windows.

Please help!!

you could assume that everything you can do with javascript, you can also do with angular or other frameworks. In the end, Angular is just a javascript framework. — Hitmands, Jun 19 '17 at 08:54
i am asking about any possibility for this .Or any other solution for this. please suggest — Sarath, Jun 19 '17 at 09:00
https://stackoverflow.com/questions/10324949/draw-on-top-of-an-image-in-html-javascript — Hitmands, Jun 19 '17 at 09:01

score 1 · Answer 1 · edited Jun 28 '21 at 22:21

Yes you can do it by using Canvas. Here an Example:

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 CODE

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

</canvas>

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

UPDATED for Angular 8+

Replace

@ViewChild('myCanvas') canvasRef: ElementRef;
@ViewChild('bubbleimg') bubble_img: ElementRef

to this:

@ViewChild('myCanvas', {static: false}) canvasRef: ElementRef;
@ViewChild('bubbleimg', {static: false}) bubble_img: ElementRef

Drawing in image with angular 2

1 Answers1