给出边界框和图像的坐标,我想在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();
}
}
答案 0 :(得分:0)
https://stackblitz.com/edit/angular-lg4lmy
删除
width={{imgWidth}} height={{imgHeight}}
添加
this.layer1CanvasElement.width = this.imgWidth;
this.layer1CanvasElement.height = this.imgHeight;
更改自
this.context.drawImage(this.image,this.imgWidth, this.imgHeight);
至
this.context.drawImage(this.image, 0, 0, this.imgWidth, this.imgHeight);
添加mousemove事件监听器
this.layer1CanvasElement.addEventListener("mousemove", function(e) {})
确定点
(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");
});
基于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);
我了解您需要实现此功能
我想显示可点击的边框
HTMLCanvasElement.getContext() - Web APIs | MDN
CanvasRenderingContext2D.drawImage() - Web APIs | MDN
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
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
is poin Belongs to sqrae - Google Search
analytic geometry - How to check if a point is inside a rectangle? - Mathematics Stack Exchange
angular - Operator '>' cannot be applied to types 'boolean' and 'number'? - Stack Overflow
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