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

时间:2019-12-09 16:25:44

标签: javascript html angular typescript

给出边界框和图像的坐标,我想在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();
  }
}

2 个答案:

答案 0 :(得分:0)

Stackblitz链接

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

预览

enter image description here

步骤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

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

为什么要执行步骤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

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

      

    我想显示可点击的边框

参考重要

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

答案 1 :(得分:0)

您可以使用一个名为Annotorious的工具。我已使用它在Angular 8中为图像添加注释。该工具已获得BSD许可。相当容易使用。您可以根据需要下载源代码并编辑小部件。完全很棒的工具。 Annotorious tool