javascript - Display and Select Bounding Boxes on Image

admin管理员组
文章数量:1026961

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();
  }
}

Share Improve this question edited Dec 10, 2019 at 9:22 asked Dec 9, 2019 at 16:25 daniel 751 silver badge7 bronze badges

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);

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

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();
  }
}

Share Improve this question edited Dec 10, 2019 at 9:22 asked Dec 9, 2019 at 16:25 daniel 751 silver badge7 bronze badges

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);

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

本文标签： javascriptDisplay and Select Bounding Boxes on ImageStack Overflow

版权声明：本文标题：javascript - Display and Select Bounding Boxes on Image - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745651514a2161347.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - Display and Select Bounding Boxes on Image - Stack Overflow

2 Answers 2

Stackblitz Link

Preview

Step 01

Step 02

Step 03

Step 04

Step 05

Why Step 01 && 02

Why Step 03

Why Step 04 && 05

Ref. important

Ref. unimportant

2 Answers 2

Stackblitz Link

Preview

Step 01

Step 02

Step 03

Step 04

Step 05

Why Step 01 && 02

Why Step 03

Why Step 04 && 05

Ref. important

Ref. unimportant

更多相关文章

javascript - Display and Select Bounding Boxes on Image - Stack Overflow

发表评论

推荐文章

javascript - jQuery DataTables - custom filter for column that contains text field - Stack Overflow

javascript - How to use await in a callback? - Stack Overflow

javascript - Elegant way to set alphabet variable like Excel columns - Stack Overflow

javascript - Angular 2 Image resize before upload - Stack Overflow

Posting Photos and Other Attachments in a BuddyPress Forum?

热门文章

javascript - How do I get full logs out of aws lambda invoke? - Stack Overflow

javascript - Many AJAX requests at once with CSRF protection - Stack Overflow

node.js - How to handle authentication in a backend using Firebase Admin SDK and Express with TypeScript? - Stack Overflow

javascript - Split String at specific character - Stack Overflow

javascript - How to export Excel data with the date range in Laravel? - Stack Overflow

javascript - React span space in between text - Stack Overflow

mailing list - Batch Emails with wp_mail()

python - How to collapse all cells by default in Jupyter notebooks in Visual Studio Code? - Stack Overflow

javascript - tabs.executeScript: Cannot access a chrome: URL - Stack Overflow

python locust config file for multiple filesclasses - Stack Overflow

最新文章

windows设置断电重启开机后自动输入锁屏密码登录

Windows系统设置开机默认开启数字小键盘

Windows11 开机自动同步时间（开机时间不更新问题）

windows配置开机自启动软件或脚本

【Redis】Windows设置Redis为开机自启动

程序员刚毕业，先去大厂镀金还是先去小厂攒经验？

万象2008清空boss账户密码

【Tools】GitBook简明教程

oracle exadata celldisk 闪存盘受损导致性能下降

SDUT 2138 图结构练习——BFSDFS——判断可达性

wp query - Getting the post terms &#39;wp_get_post_terms&#39; per post when within the functions.php file

javascript - &quot;Attempting to use a disconnected port object&quot; with Long-lived connections in chrome extension -

rvest - Using R to gather data from dynamic webpage - Stack Overflow

javascript - ejs &lt;%- body %&gt; body is not defined - Stack Overflow

How to display custom post type pagination buttons when processing AJAX request

wp query - Getting the post terms 'wp_get_post_terms' per post when within the functions.php file

javascript - "Attempting to use a disconnected port object" with Long-lived connections in chrome extension -

javascript - ejs <%- body %> body is not defined - Stack Overflow