javascript - 显示并选择图像上的边界框

Question

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

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

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

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

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

组件.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>

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

Answer 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

• 添加 mousemove 事件监听器

  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

• 不确定，但我认为它喜欢 Angular 变化检测

为什么要进行步骤 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);

为什么要执行步骤 04 && 05

• 据我了解，您需要实现此功能

  I would like to display clickable bounding boxes

引用号。重要

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

引用号。不重要

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