|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
import { HttpClient, HttpErrorResponse } from '@angular/common/http'; |
|
|
|
|
import { Component, OnInit } from '@angular/core'; |
|
|
|
|
import { ActivatedRoute } from '@angular/router'; |
|
|
|
|
import { Component, Input, OnInit } from '@angular/core'; |
|
|
|
|
import { NzMessageService } from 'ng-zorro-antd/message'; |
|
|
|
|
import { NzModalService } from 'ng-zorro-antd/modal'; |
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
|
|
selector: 'app-image-label2', |
|
|
|
|
@ -10,8 +10,9 @@ import { NzMessageService } from 'ng-zorro-antd/message';
|
|
|
|
|
}) |
|
|
|
|
export class ImageLabel2Component implements OnInit { |
|
|
|
|
|
|
|
|
|
constructor(private route: ActivatedRoute, private http: HttpClient, private message: NzMessageService) { } |
|
|
|
|
constructor(private http: HttpClient, private message: NzMessageService, private modal: NzModalService) { } |
|
|
|
|
|
|
|
|
|
@Input() data: any; //传递id
|
|
|
|
|
camerasData: any; //摄像头Data
|
|
|
|
|
imgItem: any; //图片 URL
|
|
|
|
|
canvasWidth: number = 0; |
|
|
|
|
@ -24,7 +25,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ngAfterContentInit(): void { |
|
|
|
|
@ -39,55 +40,46 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
anewgetImg() { |
|
|
|
|
let params = { |
|
|
|
|
cameraId: this.data |
|
|
|
|
} |
|
|
|
|
this.http.put('/api/Cameras/Commands/CaptureImages', '', { params: params }).subscribe( |
|
|
|
|
{ |
|
|
|
|
next: (value: Object) => { |
|
|
|
|
this.message.create('success', '向边缘设备发送请求成功，请过一段时间手动刷新页面!'); |
|
|
|
|
}, |
|
|
|
|
error: (error: HttpErrorResponse) => { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
complete: () => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.route.queryParams.subscribe(parmas => { |
|
|
|
|
let params = { |
|
|
|
|
cameraId: parmas.id |
|
|
|
|
} |
|
|
|
|
this.http.put('/api/Cameras/Commands/CaptureImages', '', { params: params }).subscribe( |
|
|
|
|
{ |
|
|
|
|
next: (value: Object) => { |
|
|
|
|
// console.log(111, value)
|
|
|
|
|
this.message.create('success', '向边缘设备发送请求成功，请过一段时间手动刷新页面!'); |
|
|
|
|
}, |
|
|
|
|
error: (error: HttpErrorResponse) => { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
complete: () => { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//获取 摄像头图片/标注点位
|
|
|
|
|
getImgMarkData() { |
|
|
|
|
let that = this |
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
that.route.queryParams.subscribe(parmas => { |
|
|
|
|
that.http.get(`/api/Cameras/${parmas.id}`).subscribe((info: any) => { |
|
|
|
|
info.dimensionedPoints ? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null; |
|
|
|
|
that.camerasData = info; |
|
|
|
|
that.markType = info.type; |
|
|
|
|
console.log(that.camerasData, "摄像头数据") |
|
|
|
|
const httpOptions = { |
|
|
|
|
responseType: 'blob' as 'json', |
|
|
|
|
params: { cameraId: parmas.id } |
|
|
|
|
}; |
|
|
|
|
that.http.get(`/api/Cameras/Images`, httpOptions).subscribe({ |
|
|
|
|
next: (data) => { |
|
|
|
|
resolve(data) |
|
|
|
|
}, |
|
|
|
|
error: (err) => { |
|
|
|
|
reject('error') |
|
|
|
|
}, |
|
|
|
|
}) //get
|
|
|
|
|
that.http.get(`/api/Cameras/${that.data}`).subscribe((info: any) => { |
|
|
|
|
info.dimensionedPoints ? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null; |
|
|
|
|
that.camerasData = info; |
|
|
|
|
that.markType = info.type; |
|
|
|
|
console.log(that.camerasData, "摄像头数据") |
|
|
|
|
const httpOptions = { |
|
|
|
|
responseType: 'blob' as 'json', |
|
|
|
|
params: { cameraId: that.data } |
|
|
|
|
}; |
|
|
|
|
that.http.get(`/api/Cameras/Images`, httpOptions).subscribe({ |
|
|
|
|
next: (data) => { |
|
|
|
|
resolve(data) |
|
|
|
|
}, |
|
|
|
|
error: (err) => { |
|
|
|
|
reject('error') |
|
|
|
|
}, |
|
|
|
|
}) //get
|
|
|
|
|
}) //route
|
|
|
|
|
}) //get
|
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -122,8 +114,13 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
let paramsData = JSON.parse(JSON.stringify(this.camerasData)) |
|
|
|
|
paramsData.dimensionedPoints = JSON.stringify(paramsData.dimensionedPoints) |
|
|
|
|
this.http.put(`/api/Cameras/${this.camerasData.id}`, paramsData).subscribe(data => { |
|
|
|
|
this.http.put(`/api/Cameras/${this.camerasData.id}/DimensionedPoints`, paramsData).subscribe(data => { |
|
|
|
|
this.message.create('success', '保存成功!'); |
|
|
|
|
const isFullScreen = document.fullscreenElement |
|
|
|
|
if (document.exitFullscreen && isFullScreen) { //关闭全屏
|
|
|
|
|
document.exitFullscreen() |
|
|
|
|
} |
|
|
|
|
this.modal.closeAll(); |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -149,20 +146,23 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
img.src = that.imgItem ? that.imgItem : "../../../assets/images/bgImg.png"; |
|
|
|
|
img.onload = () => { |
|
|
|
|
// 等比例缩放图片
|
|
|
|
|
var scale = 1; |
|
|
|
|
if (img.width > center.clientWidth || img.height > center.clientHeight) { |
|
|
|
|
let scaleOne = center.clientWidth / img.width; |
|
|
|
|
let scaleTwo = center.clientHeight / img.height; |
|
|
|
|
if (img.width * scaleOne <= center.clientWidth && img.height * scaleOne <= center.clientHeight) { |
|
|
|
|
scale = scaleOne; |
|
|
|
|
} else if (img.width * scaleTwo <= center.clientWidth && img.height * scaleTwo <= center.clientHeight) { |
|
|
|
|
scale = scaleTwo; |
|
|
|
|
} else { |
|
|
|
|
scale = 0.3; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
that.canvasWidth = img.width * scale; |
|
|
|
|
that.canvasHeight = img.height * scale; // 计算等比缩小后图片
|
|
|
|
|
// var scale = 1;
|
|
|
|
|
// if (img.width > center.clientWidth || img.height > center.clientHeight) {
|
|
|
|
|
// let scaleOne = center.clientWidth / img.width;
|
|
|
|
|
// let scaleTwo = center.clientHeight / img.height;
|
|
|
|
|
// if (img.width * scaleOne <= center.clientWidth && img.height * scaleOne <= center.clientHeight) {
|
|
|
|
|
// scale = scaleOne;
|
|
|
|
|
// } else if (img.width * scaleTwo <= center.clientWidth && img.height * scaleTwo <= center.clientHeight) {
|
|
|
|
|
// scale = scaleTwo;
|
|
|
|
|
// } else {
|
|
|
|
|
// scale = 0.3;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// that.canvasWidth = img.width * scale;
|
|
|
|
|
// that.canvasHeight = img.height * scale; // 计算等比缩小后图片
|
|
|
|
|
that.canvasWidth = img.width; |
|
|
|
|
that.canvasHeight = img.height; |
|
|
|
|
console.log(img.width + "*" + img.height) |
|
|
|
|
window.setTimeout(() => { // 加载图片
|
|
|
|
|
ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight); |
|
|
|
|
this.copyCanvas = ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight) |
|
|
|
|
@ -202,10 +202,6 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
|
|
|
|
|
//清空画布
|
|
|
|
|
clearCanvas() { |
|
|
|
|
let istrue = confirm("清除属于不可逆操作,你是否继续?"); |
|
|
|
|
if (!istrue) { |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
// 清空标绘箭头
|
|
|
|
|
this.arrowPoints = []; |
|
|
|
|
// 清空标绘箭头
|
|
|
|
|
|
