在图像上显示和选择边界框答案

【问题标题】：Display and Select Bounding Boxes on Image在图像上显示和选择边界框
【发布时间】：2020-04-02 19:04:50
【问题描述】：

给定边界框和图像的坐标，我想在 Angular Web 应用程序中的图像上显示可点击的边界框。

目标是用户应该选择一个或多个绘制在图像上的边界框以进行标记。

到目前为止，我只看到了带有 HTML Canvas 的可绘制边界框。但是，就我而言，已经存在多个边界框。我该如何完成这项任务？

编辑：我尝试将两个画布元素叠加在一起，但是，我什至无法显示图像，更不用说显示矩形了。

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

component.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>

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

【问题讨论】：

添加您尝试过的代码并尝试在 stackblitz 上创建演示
谢谢，我之前应该这样做的。做了更多的研究并尽力而为，直到我陷入困境；在此处添加了 stackblitz 演示和相关代码。
回答是否解决了您的问题？如果是的话，你能分享一下代码吗？

标签： javascript html angular typescript

【解决方案1】：

Stackblitz 链接

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

预览

步骤 01

删除

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

步骤 02

添加

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

步骤 03

改变

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

到

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

步骤 04

添加鼠标移动事件监听器

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

步骤 05

确定点
```
  (PointX,PointY) 
```

属于矩形

  (RectangleX,RectangleY,RectangleWidth,RectangleHeight)

通过使用

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

代码

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

为什么是步骤 01 && 02

不确定，但我认为它喜欢角度变化检测

为什么是步骤 03

基于CanvasRenderingContext2D.drawImage() - Web APIs | MDN，您正在滥用重载

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