Given coordinates for bounding boxes and an image, I would like to display clickable bounding boxes over the image in an Angular Web Application.

The goal is that the user should select one or multiple bounding boxes drawn over the image for labelling purposes.

So far I have only seen drawable bounding boxes with HTML Canvas. However, in my case, multiple bounding boxes already exist. How could I approach this task?

EDIT: I have tried layering two canvas elements on top of each other, however, I could not even get the image to display, let alone make rectangles appear.

ponent.html:

<div style="position: relative;">
 <canvas #layer1 id="layer1" width={{imgWidth}} height={{imgHeight}} 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas #layer2 id="layer2" width={{imgWidth}} height={{imgHeight}}
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

ponent.ts:

export class AppComponent {

  public imgWidth: number;
  public imgHeight: number;
  public url: string;
  public image;

  @ViewChild("layer1", { static: false }) layer1Canvas: ElementRef;
  private context: CanvasRenderingContext2D;
  private layer1CanvasElement: any;

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);

      reader.onload = event => {
        this.image = new Image();
        this.image.src = reader.result;
        this.image.onload = () => {
          this.imgWidth = this.image.width;
          this.imgHeight = this.image.height;
          this.showImage();
        };
      };
    }
  }

  showImage() {
    this.layer1CanvasElement = this.layer1Canvas.nativeElement;
    this.context = this.layer1CanvasElement.getContext("2d");
    this.context.drawImage(this.image, this.imgWidth, this.imgHeight);
    this.drawRect();
  }

  drawRect() {
    this.context.beginPath();
    this.context.rect(200, 300, 400, 500);
    this.context.lineWidth = 10;
    this.context.strokeStyle = "black";
    this.context.stroke();
  }
}

Given coordinates for bounding boxes and an image, I would like to display clickable bounding boxes over the image in an Angular Web Application.

The goal is that the user should select one or multiple bounding boxes drawn over the image for labelling purposes.

So far I have only seen drawable bounding boxes with HTML Canvas. However, in my case, multiple bounding boxes already exist. How could I approach this task?

EDIT: I have tried layering two canvas elements on top of each other, however, I could not even get the image to display, let alone make rectangles appear.

https://stackblitz./edit/angular-bvnjc3

ponent.html:

<div style="position: relative;">
 <canvas #layer1 id="layer1" width={{imgWidth}} height={{imgHeight}} 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas #layer2 id="layer2" width={{imgWidth}} height={{imgHeight}}
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

ponent.ts:

export class AppComponent {

  public imgWidth: number;
  public imgHeight: number;
  public url: string;
  public image;

  @ViewChild("layer1", { static: false }) layer1Canvas: ElementRef;
  private context: CanvasRenderingContext2D;
  private layer1CanvasElement: any;

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);

      reader.onload = event => {
        this.image = new Image();
        this.image.src = reader.result;
        this.image.onload = () => {
          this.imgWidth = this.image.width;
          this.imgHeight = this.image.height;
          this.showImage();
        };
      };
    }
  }

  showImage() {
    this.layer1CanvasElement = this.layer1Canvas.nativeElement;
    this.context = this.layer1CanvasElement.getContext("2d");
    this.context.drawImage(this.image, this.imgWidth, this.imgHeight);
    this.drawRect();
  }

  drawRect() {
    this.context.beginPath();
    this.context.rect(200, 300, 400, 500);
    this.context.lineWidth = 10;
    this.context.strokeStyle = "black";
    this.context.stroke();
  }
}

• javascript
• html
• angular
• typescript

Share Improve this question Follow edited Dec 10, 2019 at 9:22 daniel asked Dec 9, 2019 at 16:25 danieldaniel 7511 silver badge77 bronze badges 3

• 2 add the code you tried and try creating a demo on stackblitz – Allabakash Commented Dec 9, 2019 at 16:28
• Thank you, I should have done that before. Did some more research and tried my best until I got stuck; added a stackblitz demo and the relevant code here. – daniel Commented Dec 10, 2019 at 9:24
• Did answer solve your problem ? If it did, can you share the code ? – GhostDede Commented Oct 23, 2020 at 11:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Stackblitz Link

https://stackblitz./edit/angular-lg4lmy

Preview

Step 01

• remove

  width={{imgWidth}} height={{imgHeight}}
  

Step 02

• add

  this.layer1CanvasElement.width = this.imgWidth;
  this.layer1CanvasElement.height = this.imgHeight;
  

Step 03

• change from

  this.context.drawImage(this.image,this.imgWidth, this.imgHeight);
  

• to

  this.context.drawImage(this.image, 0, 0, this.imgWidth, this.imgHeight);
  

Step 04

• add mousemove event listener

  this.layer1CanvasElement.addEventListener("mousemove", function(e) {})
  

Step 05

• determine if the Point

    (PointX,PointY) 
  

• belong to the Rectangle

    (RectangleX,RectangleY,RectangleWidth,RectangleHeight)
  

• by using

    (RectangleX <=       PointX       <= RectangleX + RectangleWidth)
    (RectangleY <=       PointY       <= RectangleY + RectangleHeight)
  

• code

    let x = 200;
    let y = 300;
    let w = 400;
    let h = 500;
  
    if ( 
         x <= e.clientX && e.clientX <= x + w 
                          &&
         y <= e.clientY && e.clientY <= y + h  
       )
       drawRect("red");
       else 
       drawRect("black");
  });
  

Why Step 01 && 02

• no sure but i think it liked to angular change detection

Why Step 03

• base on CanvasRenderingContext2D.drawImage() - Web APIs | MDN you are misusing the overload

  void ctx.drawImage(image, dx, dy);

  void ctx.drawImage(image, dx, dy, dWidth, dHeight);

  void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Why Step 04 && 05

• my understanding you needed to implement this feature

  I would like to display clickable bounding boxes

Ref. important

HTMLCanvasElement.getContext() - Web APIs | MDN

CanvasRenderingContext2D.drawImage() - Web APIs | MDN

Clickable canvas circle

Hit Region Detection For HTML5 Canvas And How To Listen To Click Events On Canvas Shapes

MouseEvent.clientX - Web APIs | MDN

Ref. unimportant

getContext("2d");+ - Google Search

What is my_canvas.getContext("2d"); and how it work? | Codecademy

access angular app from console - Google Search

Debugging Angular from the Browser Console - Made by Munsters - Medium

js get image size from FileReader - Google Search

javascript - Getting width & height of an image with filereader - Stack Overflow

jquery - Get the real width and height of an image with JavaScript? (in Safari/Chrome) - Stack Overflow

onload image angluer - Google Search

image.onload - Archive of obsolete content | MDN

angular - Detect when image has loaded in img tag - Stack Overflow

angluer this.context.drawImage - Google Search

typescript - Angular 5 with Canvas drawImage not showing up - Stack Overflow

javascript - CanvasContext2D drawImage() issue [onload and CORS] - Stack Overflow

addeventlistener definition file typescript - Google Search

javascript - Adding window.event handler to typescript - Stack Overflow

clientX - Google Search

is poin Belongs to sqrae - Google Search

analytic geometry - How to check if a point is inside a rectangle? - Mathematics Stack Exchange

Plane (geometry) - Wikipedia

angular - Operator '>' cannot be applied to types 'boolean' and 'number'? - Stack Overflow

stroke() - Google Search

HTML canvas stroke() Method

canvas change path color on hover - Google Search

javascript - Change color lines in canvas when mouseover - Stack Overflow

You could use a tool named Annotorious. I have used it for annotating images in Angular 8. The tool is licensed under BSD License. Pretty easy to use. You could download the source code and edit the widgets if you want. Totally great tool. Annotorious tool