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