1362 lines
45 KiB
Vue
1362 lines
45 KiB
Vue
<template>
|
||
<div class="image-results-container">
|
||
<!-- 按下标分组显示 -->
|
||
<template v-if="groupedImageResults && groupedImageResults.length > 0">
|
||
<div
|
||
v-for="(group, groupIndex) in groupedImageResults"
|
||
:key="group.index"
|
||
class="group-section"
|
||
>
|
||
<!-- 每组的上传信息提示 -->
|
||
<div class="upload-info" v-if="isEvaluate == '0'">
|
||
<img
|
||
src="@/assets/images/imageCaptioning/photography.png"
|
||
alt=""
|
||
class="icon-photography"
|
||
/>
|
||
<span>
|
||
第{{ group.index + 1 }}组 - {{ group.operaName }}:
|
||
上传{{ group.totalCount }}张图片，可识别标注{{
|
||
group.recognizedCount
|
||
}}张，
|
||
{{
|
||
group.unrecognizedCount
|
||
}}张无法识别标注。已识别标注图片如下，请确认。
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 每组的图片展示 -->
|
||
<div class="image-results-grid">
|
||
<div
|
||
v-for="(result, imageIndex) in group.images"
|
||
:key="imageIndex"
|
||
:class="
|
||
isEvaluate == '1'
|
||
? 'image-item-evaluate'
|
||
: 'image-item'
|
||
"
|
||
>
|
||
<el-image
|
||
:class="
|
||
isEvaluate == '1'
|
||
? 'result-image-evaluate'
|
||
: 'result-image'
|
||
"
|
||
:src="result.url"
|
||
fit="contain"
|
||
@click="onClickImage(result, group.isSure)"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
<!-- 右上角的hand图标 -->
|
||
<img
|
||
v-if="
|
||
isGroupImageSelected(groupIndex, imageIndex) &&
|
||
isEvaluate == '0'
|
||
"
|
||
src="@/assets/images/imageCaptioning/hand-yellow.png"
|
||
alt="selected"
|
||
class="icon-hand"
|
||
@click="
|
||
handleGroupImageClick(
|
||
groupIndex,
|
||
imageIndex,
|
||
group.isSure,
|
||
)
|
||
"
|
||
/>
|
||
<img
|
||
v-else-if="
|
||
!isGroupImageSelected(groupIndex, imageIndex) &&
|
||
isEvaluate == '0'
|
||
"
|
||
src="@/assets/images/imageCaptioning/hand.png"
|
||
alt="hand"
|
||
class="icon-hand"
|
||
@click="
|
||
handleGroupImageClick(
|
||
groupIndex,
|
||
imageIndex,
|
||
group.isSure,
|
||
)
|
||
"
|
||
/>
|
||
|
||
<div class="card-content" v-if="isEvaluate == '1'">
|
||
<div class="card-footer">
|
||
<div class="person-info">
|
||
<span class="name"
|
||
>综合得分:{{ overallScore }}</span
|
||
>
|
||
<span class="name">{{ dictValue }}</span>
|
||
<span class="date">{{ contentImage }}</span>
|
||
</div>
|
||
<div class="tags">
|
||
<div class="tag-row">
|
||
<span
|
||
class="tag-item"
|
||
style="padding-left: 16px"
|
||
>清晰度: {{ clarity }}分</span
|
||
>
|
||
<span
|
||
class="tag-item"
|
||
style="padding-left: 16px"
|
||
>干净度: {{ cleanliness }}分</span
|
||
>
|
||
<span class="tag-item"
|
||
>压缩痕迹:
|
||
{{ compressMarks }}分</span
|
||
>
|
||
</div>
|
||
<div class="tag-row">
|
||
<span class="tag-item"
|
||
>明暗均衡: {{ balance }}分</span
|
||
>
|
||
<span class="tag-item"
|
||
>整体观感: {{ impression }}分</span
|
||
>
|
||
<span class="tag-item"
|
||
>细节体验: {{ detail }}分</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 每组的操作按钮 -->
|
||
<div class="action-buttons" v-if="isEvaluate == '0'">
|
||
<el-button
|
||
type="primary"
|
||
@click="confirmGroup(groupIndex, group.id)"
|
||
:disabled="group.isSure === '1'"
|
||
>
|
||
{{ group.isSure === '1' ? '已确认' : '确认' }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 保持原有的单一展示方式 -->
|
||
<template v-else>
|
||
<!-- 上传信息提示 -->
|
||
<div class="upload-info" v-if="isEvaluate == '0'">
|
||
<img
|
||
src="@/assets/images/imageCaptioning/photography.png"
|
||
alt=""
|
||
class="icon-photography"
|
||
/>
|
||
<span>{{ uploadInfo }}</span>
|
||
</div>
|
||
|
||
<!-- 图片识别结果展示 -->
|
||
<div class="image-results-grid">
|
||
<div
|
||
v-for="(result, index) in imageResults"
|
||
:key="index"
|
||
:class="
|
||
isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'
|
||
"
|
||
>
|
||
<ImagePreview
|
||
:class="
|
||
isEvaluate == '1'
|
||
? 'result-image-evaluate'
|
||
: 'result-image'
|
||
"
|
||
:src="result.url"
|
||
@click.native="onClickImage(result)"
|
||
/>
|
||
|
||
<!-- 右上角的hand图标 -->
|
||
<img
|
||
v-if="selectedImages[index] && isEvaluate == '0'"
|
||
src="@/assets/images/imageCaptioning/hand-yellow.png"
|
||
alt="selected"
|
||
class="icon-hand"
|
||
@click="handleImageClick(index, isSure)"
|
||
/>
|
||
<img
|
||
v-else-if="!selectedImages[index] && isEvaluate == '0'"
|
||
src="@/assets/images/imageCaptioning/hand.png"
|
||
alt="hand"
|
||
class="icon-hand"
|
||
@click="handleImageClick(index, isSure)"
|
||
/>
|
||
|
||
<div class="card-content" v-if="isEvaluate == '1'">
|
||
<div class="card-footer">
|
||
<div class="person-info">
|
||
<span class="name"
|
||
>综合得分:{{ overallScore }}</span
|
||
>
|
||
<span class="name">{{ dictValue }}</span>
|
||
<span class="date">{{ contentImage }}</span>
|
||
</div>
|
||
<div class="tags">
|
||
<div class="tag-row">
|
||
<span
|
||
class="tag-item"
|
||
style="padding-left: 16px"
|
||
>清晰度: {{ clarity }}分</span
|
||
>
|
||
<span
|
||
class="tag-item"
|
||
style="padding-left: 16px"
|
||
>干净度: {{ cleanliness }}分</span
|
||
>
|
||
<span class="tag-item"
|
||
>压缩痕迹: {{ compressMarks }}分</span
|
||
>
|
||
</div>
|
||
<div class="tag-row">
|
||
<span class="tag-item"
|
||
>明暗均衡: {{ balance }}分</span
|
||
>
|
||
<span class="tag-item"
|
||
>整体观感: {{ impression }}分</span
|
||
>
|
||
<span class="tag-item"
|
||
>细节体验: {{ detail }}分</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="action-buttons" v-if="isEvaluate == '0'">
|
||
<el-button
|
||
type="primary"
|
||
@click="$emit('confirm-results')"
|
||
:disabled="isSure === '1'"
|
||
>
|
||
{{ isSure === '1' ? '已确认' : '确认' }}
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 图片显示弹框 -->
|
||
<el-dialog
|
||
width="70%"
|
||
:visible.sync="imageDialogVisible"
|
||
:before-close="handleCloseImageDialog"
|
||
>
|
||
<template #title>
|
||
<span>{{ isSure == 1 ? '图片查看' : '图片标注' }}</span>
|
||
</template>
|
||
<div v-if="currentImage" class="annotation-dialog">
|
||
<div class="annotation-preview">
|
||
<div
|
||
v-if="isReAnnotating"
|
||
class="annotation-canvas-wrapper"
|
||
:style="{
|
||
width: canvasWidth + 'px',
|
||
height: canvasHeight + 'px',
|
||
}"
|
||
>
|
||
<canvas ref="imageCanvas" class="image-canvas"></canvas>
|
||
<canvas
|
||
ref="drawCanvas"
|
||
class="draw-canvas"
|
||
@mousedown="handleMouseDown"
|
||
@mousemove="handleMouseMove"
|
||
@mouseup="handleMouseUp"
|
||
@mouseleave="handleMouseLeave"
|
||
></canvas>
|
||
</div>
|
||
<img
|
||
v-else
|
||
:src="imgSrc"
|
||
alt="preview"
|
||
class="annotation-preview-image"
|
||
/>
|
||
</div>
|
||
|
||
<div v-if="isReAnnotating" class="annotation-type">
|
||
<span class="label">标注类型：</span>
|
||
<el-radio-group v-model="annotationType" size="small">
|
||
<el-radio-button
|
||
v-for="option in annotationTypeOptions"
|
||
:key="option.value"
|
||
:label="option.value"
|
||
>
|
||
{{ option.label }}
|
||
</el-radio-button>
|
||
</el-radio-group>
|
||
|
||
<!-- 增加一个tags标签新增 每次可以新增一个 -->
|
||
<div>
|
||
<el-tag
|
||
:key="tag"
|
||
closable
|
||
v-for="tag in newTagsList"
|
||
:disable-transitions="false"
|
||
@close="handleClose(tag)"
|
||
>
|
||
{{ tag }}
|
||
</el-tag>
|
||
<el-input
|
||
class="input-new-tag"
|
||
v-if="inputVisible"
|
||
v-model="inputValue"
|
||
ref="saveTagInput"
|
||
size="small"
|
||
@blur="handleInputConfirm"
|
||
>
|
||
</el-input>
|
||
<el-button
|
||
v-else
|
||
class="button-new-tag"
|
||
size="small"
|
||
@click="showInput"
|
||
>+ 其他</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="annotation-info">
|
||
<div class="annotation-meta">
|
||
<p v-if="isReAnnotating">
|
||
图片尺寸：{{ originalSize.width }} x
|
||
{{ originalSize.height }}
|
||
</p>
|
||
<p v-if="annotationCoords">
|
||
当前标注：左上：({{ annotationCoords.x1 }},
|
||
{{ annotationCoords.y1 }}) ，右下：({{
|
||
annotationCoords.x2
|
||
}}, {{ annotationCoords.y2 }})
|
||
</p>
|
||
<p v-if="!annotationCoords && isReAnnotating">
|
||
请先选择标注类型，然后拖拽绘制标注框
|
||
</p>
|
||
</div>
|
||
<div class="annotation-buttons">
|
||
<el-button
|
||
v-if="!isReAnnotating && isSure != 1"
|
||
type="primary"
|
||
size="small"
|
||
@click="startReAnnotation"
|
||
>
|
||
重新标注
|
||
</el-button>
|
||
<template v-if="isReAnnotating && isSure != 1">
|
||
<el-button size="small" @click="cancelReAnnotation">
|
||
取消标注
|
||
</el-button>
|
||
<el-button
|
||
type="success"
|
||
size="small"
|
||
:disabled="!annotationCoords || !annotationType"
|
||
@click="saveTemporaryAnnotation"
|
||
>
|
||
临时确定
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
:disabled="annotations.length === 0"
|
||
@click="submitAllAnnotations"
|
||
>
|
||
提交全部
|
||
</el-button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标注列表 -->
|
||
<div
|
||
v-if="isReAnnotating && annotations.length > 0"
|
||
class="annotation-list"
|
||
>
|
||
<div class="annotation-list-title"
|
||
>已标注列表（{{ annotations.length }}）</div
|
||
>
|
||
<div class="annotation-list-content">
|
||
<div
|
||
v-for="(item, index) in annotations"
|
||
:key="index"
|
||
class="annotation-list-item"
|
||
>
|
||
<span class="annotation-item-info">
|
||
<span class="annotation-item-type">{{
|
||
getTypeLabel(item.type)
|
||
}}</span>
|
||
<span class="annotation-item-coords"
|
||
>({{ item.coords.x1 }},
|
||
{{ item.coords.y1 }}) - ({{
|
||
item.coords.x2
|
||
}}, {{ item.coords.y2 }})</span
|
||
>
|
||
</span>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
icon="el-icon-delete"
|
||
@click="removeAnnotation(index)"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="annotation-empty">请先选择图片</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getSelectedAPI,
|
||
updateImageAnnotationAPI,
|
||
} from '@/api/imageCaptioning/imageCaptioning'
|
||
export default {
|
||
name: 'ImageResults',
|
||
props: {
|
||
uploadInfo: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
imageResults: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
groupedImageResults: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
selectedImages: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
isEvaluate: {
|
||
type: String,
|
||
default: '0',
|
||
},
|
||
isSure: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
imageDialogVisible: false,
|
||
currentImage: null,
|
||
canvasWidth: 720,
|
||
canvasHeight: 480,
|
||
isReAnnotating: false,
|
||
originalSize: {
|
||
width: 0,
|
||
height: 0,
|
||
},
|
||
scaleInfo: {
|
||
scale: 1,
|
||
offsetX: 0,
|
||
offsetY: 0,
|
||
},
|
||
isDrawing: false,
|
||
startPoint: null,
|
||
currentRect: null,
|
||
annotationCoords: null,
|
||
annotationType: '',
|
||
annotations: [],
|
||
annotationTypeOptions: [
|
||
// { label: '人物', value: 'person' },
|
||
// { label: '物体', value: 'object' },
|
||
// { label: '场景', value: 'scene' },
|
||
],
|
||
|
||
imgSrc: '',
|
||
isSure: null,
|
||
newTagsList: [],
|
||
inputVisible: false,
|
||
inputValue: '',
|
||
}
|
||
},
|
||
created() {
|
||
this.getTags()
|
||
},
|
||
methods: {
|
||
isGroupImageSelected(groupIndex, imageIndex) {
|
||
// 根据分组索引和图片索引判断是否选中
|
||
const key = `${groupIndex}-${imageIndex}`
|
||
return !!this.selectedImages[key]
|
||
},
|
||
|
||
handleGroupImageClick(groupIndex, imageIndex, groupIsSure) {
|
||
// 如果该组已确认，则不允许更改选择
|
||
if (groupIsSure === '1') {
|
||
this.$message.warning('该组已确认，无法更改选择')
|
||
return
|
||
}
|
||
|
||
const key = `${groupIndex}-${imageIndex}`
|
||
this.$emit('hand-click', { groupIndex, imageIndex, key })
|
||
},
|
||
|
||
handleImageClick(index, isSure) {
|
||
// 如果已确认，则不允许更改选择
|
||
if (isSure === '1') {
|
||
this.$message.warning('已确认，无法更改选择')
|
||
return
|
||
}
|
||
|
||
this.$emit('hand-click', { index, isSingle: true })
|
||
},
|
||
|
||
confirmGroup(groupIndex, id) {
|
||
console.log('confirmGroup', id)
|
||
// 可以在这里处理特定组的确认逻辑
|
||
this.$emit('confirm-results', id)
|
||
},
|
||
|
||
// 点击图片显示弹框
|
||
onClickImage(image, isSure = null) {
|
||
console.log('image', image)
|
||
if (!image || !image.url) {
|
||
return
|
||
}
|
||
this.isSure = isSure
|
||
this.currentImage = image
|
||
this.imgSrc = image.url
|
||
this.imageDialogVisible = true
|
||
this.annotationCoords = null
|
||
this.annotationType = ''
|
||
this.annotations = []
|
||
this.isReAnnotating = false
|
||
},
|
||
|
||
// 关闭图片显示弹框
|
||
handleCloseImageDialog() {
|
||
this.imageDialogVisible = false
|
||
this.resetAnnotation()
|
||
},
|
||
|
||
startReAnnotation() {
|
||
if (this.isSure == 1) {
|
||
this.$message.warning('该图片已确认，无法重新标注')
|
||
return
|
||
}
|
||
this.isReAnnotating = true
|
||
this.annotationCoords = null
|
||
this.annotationType = ''
|
||
this.imgSrc = this.currentImage.originUrl
|
||
this.annotations = []
|
||
this.$nextTick(() => {
|
||
this.renderBaseImage()
|
||
})
|
||
},
|
||
|
||
cancelReAnnotation() {
|
||
this.isReAnnotating = false
|
||
// 清空所有状态
|
||
this.annotationCoords = null
|
||
this.annotationType = ''
|
||
this.annotations = []
|
||
this.currentRect = null
|
||
this.isDrawing = false
|
||
this.startPoint = null
|
||
this.imgSrc = this.currentImage.url
|
||
// 清空画布
|
||
this.clearDrawing()
|
||
},
|
||
|
||
renderBaseImage() {
|
||
const imageCanvas = this.$refs.imageCanvas
|
||
const drawCanvas = this.$refs.drawCanvas
|
||
if (
|
||
!this.isReAnnotating ||
|
||
!imageCanvas ||
|
||
!drawCanvas ||
|
||
!this.currentImage
|
||
) {
|
||
return
|
||
}
|
||
imageCanvas.width = this.canvasWidth
|
||
imageCanvas.height = this.canvasHeight
|
||
drawCanvas.width = this.canvasWidth
|
||
drawCanvas.height = this.canvasHeight
|
||
|
||
const ctx = imageCanvas.getContext('2d')
|
||
ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||
|
||
const img = new Image()
|
||
img.crossOrigin = 'Anonymous'
|
||
img.onload = () => {
|
||
const { naturalWidth, naturalHeight } = img
|
||
this.originalSize = {
|
||
width: naturalWidth,
|
||
height: naturalHeight,
|
||
}
|
||
const scale = Math.min(
|
||
this.canvasWidth / naturalWidth,
|
||
this.canvasHeight / naturalHeight,
|
||
)
|
||
const drawWidth = naturalWidth * scale
|
||
const drawHeight = naturalHeight * scale
|
||
const offsetX = (this.canvasWidth - drawWidth) / 2
|
||
const offsetY = (this.canvasHeight - drawHeight) / 2
|
||
ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight)
|
||
this.scaleInfo = { scale, offsetX, offsetY }
|
||
this.clearDrawing()
|
||
// 重新绘制已保存的标注
|
||
this.$nextTick(() => {
|
||
this.drawCurrentRect()
|
||
})
|
||
}
|
||
img.src = this.imgSrc
|
||
},
|
||
|
||
clearDrawing() {
|
||
const drawCanvas = this.$refs.drawCanvas
|
||
if (!drawCanvas) return
|
||
const drawCtx = drawCanvas.getContext('2d')
|
||
drawCtx.clearRect(0, 0, drawCanvas.width, drawCanvas.height)
|
||
},
|
||
|
||
handleMouseDown(event) {
|
||
if (!this.currentImage || !this.annotationType) {
|
||
if (!this.annotationType) {
|
||
this.$message.warning('请先选择标注类型')
|
||
}
|
||
return
|
||
}
|
||
const position = this.getCanvasPosition(event)
|
||
this.isDrawing = true
|
||
this.startPoint = position
|
||
this.currentRect = { ...position, width: 0, height: 0 }
|
||
},
|
||
|
||
handleMouseMove(event) {
|
||
if (!this.isDrawing || !this.currentRect) return
|
||
const position = this.getCanvasPosition(event)
|
||
this.currentRect.width = position.x - this.startPoint.x
|
||
this.currentRect.height = position.y - this.startPoint.y
|
||
this.drawCurrentRect()
|
||
},
|
||
|
||
handleMouseUp() {
|
||
if (!this.isDrawing || !this.currentRect) return
|
||
this.isDrawing = false
|
||
this.annotationCoords = this.calculateOriginalCoords(
|
||
this.currentRect,
|
||
)
|
||
},
|
||
|
||
handleMouseLeave() {
|
||
if (!this.isDrawing) return
|
||
this.isDrawing = false
|
||
this.drawCurrentRect()
|
||
},
|
||
|
||
getCanvasPosition(event) {
|
||
const canvas = this.$refs.drawCanvas
|
||
const rect = canvas.getBoundingClientRect()
|
||
const x = event.clientX - rect.left
|
||
const y = event.clientY - rect.top
|
||
return { x, y }
|
||
},
|
||
|
||
drawCurrentRect() {
|
||
const drawCanvas = this.$refs.drawCanvas
|
||
if (!drawCanvas) return
|
||
const ctx = drawCanvas.getContext('2d')
|
||
ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height)
|
||
|
||
// 绘制已保存的标注框
|
||
this.annotations.forEach((annotation) => {
|
||
const rect = this.convertToCanvasCoords(annotation.coords)
|
||
ctx.strokeStyle = '#ff0000'
|
||
ctx.lineWidth = 2
|
||
ctx.setLineDash([])
|
||
ctx.strokeRect(rect.x, rect.y, rect.width, rect.height)
|
||
})
|
||
|
||
// 绘制当前正在绘制的标注框
|
||
if (this.currentRect) {
|
||
ctx.strokeStyle = '#409eff' // 红线
|
||
ctx.lineWidth = 2
|
||
ctx.setLineDash([6, 4])
|
||
ctx.strokeRect(
|
||
this.currentRect.x,
|
||
this.currentRect.y,
|
||
this.currentRect.width,
|
||
this.currentRect.height,
|
||
)
|
||
ctx.setLineDash([])
|
||
}
|
||
},
|
||
|
||
calculateOriginalCoords(rect) {
|
||
const { scale, offsetX, offsetY } = this.scaleInfo
|
||
if (!scale || !this.originalSize.width) return null
|
||
const normalize = (value, offset) => (value - offset) / scale
|
||
let x1 = Math.min(rect.x, rect.x + rect.width)
|
||
let y1 = Math.min(rect.y, rect.y + rect.height)
|
||
let x2 = Math.max(rect.x, rect.x + rect.width)
|
||
let y2 = Math.max(rect.y, rect.y + rect.height)
|
||
|
||
x1 = this.clampCoordinate(
|
||
normalize(x1, offsetX),
|
||
0,
|
||
this.originalSize.width,
|
||
)
|
||
y1 = this.clampCoordinate(
|
||
normalize(y1, offsetY),
|
||
0,
|
||
this.originalSize.height,
|
||
)
|
||
x2 = this.clampCoordinate(
|
||
normalize(x2, offsetX),
|
||
0,
|
||
this.originalSize.width,
|
||
)
|
||
y2 = this.clampCoordinate(
|
||
normalize(y2, offsetY),
|
||
0,
|
||
this.originalSize.height,
|
||
)
|
||
|
||
return {
|
||
x1: Math.round(x1),
|
||
y1: Math.round(y1),
|
||
x2: Math.round(x2),
|
||
y2: Math.round(y2),
|
||
}
|
||
},
|
||
|
||
clampCoordinate(value, min, max) {
|
||
if (Number.isNaN(value)) return min
|
||
return Math.max(min, Math.min(max, value))
|
||
},
|
||
|
||
convertToCanvasCoords(coords) {
|
||
const { scale, offsetX, offsetY } = this.scaleInfo
|
||
if (!scale) return { x: 0, y: 0, width: 0, height: 0 }
|
||
const x1 = coords.x1 * scale + offsetX
|
||
const y1 = coords.y1 * scale + offsetY
|
||
const x2 = coords.x2 * scale + offsetX
|
||
const y2 = coords.y2 * scale + offsetY
|
||
return {
|
||
x: Math.min(x1, x2),
|
||
y: Math.min(y1, y2),
|
||
width: Math.abs(x2 - x1),
|
||
height: Math.abs(y2 - y1),
|
||
}
|
||
},
|
||
|
||
saveTemporaryAnnotation() {
|
||
if (!this.annotationCoords || !this.annotationType) {
|
||
this.$message.warning('请先完成标注并选择类型')
|
||
return
|
||
}
|
||
this.annotations.push({
|
||
coords: { ...this.annotationCoords },
|
||
type: this.annotationType,
|
||
typeName: this.getTypeLabel(this.annotationType),
|
||
})
|
||
this.annotationCoords = null
|
||
this.annotationType = ''
|
||
this.clearDrawing()
|
||
this.$nextTick(() => {
|
||
this.drawCurrentRect()
|
||
})
|
||
this.$message.success('标注已保存')
|
||
},
|
||
|
||
removeAnnotation(index) {
|
||
this.annotations.splice(index, 1)
|
||
// 清空当前正在绘制的标注
|
||
this.currentRect = null
|
||
this.annotationCoords = null
|
||
this.isDrawing = false
|
||
// 重新绘制画布（只绘制剩余的已保存标注）
|
||
this.$nextTick(() => {
|
||
this.clearDrawing()
|
||
this.drawCurrentRect()
|
||
})
|
||
// this.$message.success('标注已删除')
|
||
},
|
||
|
||
getTypeLabel(value) {
|
||
const option = this.annotationTypeOptions.find(
|
||
(opt) => opt.value === value,
|
||
)
|
||
return option ? option.label : value
|
||
},
|
||
|
||
async submitAllAnnotations() {
|
||
if (this.annotations.length === 0) {
|
||
this.$message.warning('请至少添加一个标注')
|
||
return
|
||
}
|
||
if (!this.currentImage) {
|
||
this.$message.warning('图片信息缺失')
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 生成带标注的图片base64
|
||
const imageCanvas = this.$refs.imageCanvas
|
||
const drawCanvas = this.$refs.drawCanvas
|
||
if (!imageCanvas || !drawCanvas) {
|
||
this.$message.error('无法获取画布')
|
||
return
|
||
}
|
||
|
||
// 创建一个临时canvas用于合成最终图片
|
||
const finalCanvas = document.createElement('canvas')
|
||
finalCanvas.width = this.originalSize.width
|
||
finalCanvas.height = this.originalSize.height
|
||
const finalCtx = finalCanvas.getContext('2d')
|
||
|
||
// 根据图片尺寸计算缩放比例，确保在不同分辨率下都能清晰显示
|
||
// 使用图片的平均尺寸作为基准，计算缩放因子
|
||
const avgSize =
|
||
(this.originalSize.width + this.originalSize.height) / 2
|
||
const baseSize = 1000 // 基准尺寸（1000px）
|
||
// 使用对数缩放，避免过大图片时缩放因子过大
|
||
// 缩放因子范围：0.8 - 3.0
|
||
const scaleFactor = Math.max(
|
||
0.8,
|
||
Math.min(3.0, Math.sqrt(avgSize / baseSize)),
|
||
)
|
||
|
||
// 根据缩放因子动态计算线条宽度和字体大小
|
||
const baseLineWidth = 1.5
|
||
const lineWidth = baseLineWidth * scaleFactor
|
||
const baseFontSize = 12
|
||
const fontSize = baseFontSize * scaleFactor
|
||
const baseMargin = 2
|
||
const margin = baseMargin * scaleFactor
|
||
const basePadding = 2
|
||
const padding = basePadding * scaleFactor
|
||
|
||
// 加载原始图片
|
||
const img = new Image()
|
||
img.crossOrigin = 'Anonymous'
|
||
await new Promise((resolve, reject) => {
|
||
img.onload = () => {
|
||
// 绘制原始图片
|
||
finalCtx.drawImage(
|
||
img,
|
||
0,
|
||
0,
|
||
this.originalSize.width,
|
||
this.originalSize.height,
|
||
)
|
||
|
||
// 绘制所有标注框
|
||
this.annotations.forEach((annotation) => {
|
||
const { coords, typeName } = annotation
|
||
// 绘制标注框
|
||
finalCtx.strokeStyle = '#03FB02'
|
||
finalCtx.lineWidth = lineWidth
|
||
finalCtx.strokeRect(
|
||
coords.x1,
|
||
coords.y1,
|
||
coords.x2 - coords.x1,
|
||
coords.y2 - coords.y1,
|
||
)
|
||
|
||
// 绘制类型名称标签
|
||
if (typeName) {
|
||
// 设置字体
|
||
finalCtx.font = `${fontSize}px Arial`
|
||
finalCtx.textBaseline = 'top'
|
||
|
||
// 测量文字宽度
|
||
const textMetrics =
|
||
finalCtx.measureText(typeName)
|
||
const textWidth = textMetrics.width
|
||
const textHeight = fontSize
|
||
|
||
// 标签位置（标注框左上角 + margin）
|
||
const labelX = coords.x1 + margin
|
||
const labelY = coords.y1 + margin
|
||
|
||
// 绘制背景矩形
|
||
finalCtx.fillStyle = '#01CB04'
|
||
finalCtx.fillRect(
|
||
labelX,
|
||
labelY,
|
||
textWidth + padding * 2,
|
||
textHeight + padding * 2,
|
||
)
|
||
|
||
// 绘制文字
|
||
finalCtx.fillStyle = '#ffffff'
|
||
finalCtx.fillText(
|
||
typeName,
|
||
labelX + padding,
|
||
labelY + padding,
|
||
)
|
||
}
|
||
})
|
||
|
||
resolve()
|
||
}
|
||
img.onerror = reject
|
||
img.src = this.imgSrc
|
||
})
|
||
|
||
// 转换为base64
|
||
const base64Image = finalCanvas.toDataURL('image/png')
|
||
|
||
// 提交数据
|
||
// this.$emit('manual-annotation', {
|
||
// image: this.currentImage,
|
||
// annotations: this.annotations,
|
||
// base64Image: base64Image,
|
||
// })
|
||
|
||
console.log(
|
||
'base64Image',
|
||
base64Image,
|
||
'annotations',
|
||
this.annotations,
|
||
'image',
|
||
this.currentImage,
|
||
)
|
||
|
||
// 根据this.annotations 把重复的标签去重
|
||
const tagList = new Set(this.annotations.map((e) => e.typeName))
|
||
console.log('tagList', tagList)
|
||
|
||
// 组装参数
|
||
const params = {
|
||
id: this.currentImage.id,
|
||
bast64: base64Image,
|
||
jsonData: JSON.stringify(
|
||
this.annotations.map((e) => {
|
||
return {
|
||
class: e.typeName,
|
||
confidence: 0,
|
||
bbox: {
|
||
x1: e.coords.x1,
|
||
y1: e.coords.y1,
|
||
x2: e.coords.x2,
|
||
y2: e.coords.y2,
|
||
},
|
||
}
|
||
}),
|
||
),
|
||
// 获取标签去重后的数据（Set转数组后join）
|
||
type: Array.from(tagList).join(','),
|
||
}
|
||
|
||
console.log('params', params)
|
||
|
||
const res = await updateImageAnnotationAPI(params)
|
||
|
||
console.log('res', res)
|
||
if (res.code === 200) {
|
||
this.$message.success('标注已提交')
|
||
this.cancelReAnnotation()
|
||
this.imageDialogVisible = false
|
||
this.$emit('update-image-annotation')
|
||
}
|
||
// this.$message.success('标注已提交')
|
||
// 重置状态
|
||
} catch (error) {
|
||
console.error('提交标注失败:', error)
|
||
this.$message.error('提交标注失败，请重试')
|
||
}
|
||
},
|
||
|
||
resetAnnotation() {
|
||
this.currentImage = null
|
||
this.annotationCoords = null
|
||
this.annotationType = ''
|
||
this.annotations = []
|
||
this.isReAnnotating = false
|
||
this.originalSize = { width: 0, height: 0 }
|
||
this.scaleInfo = { scale: 1, offsetX: 0, offsetY: 0 }
|
||
this.isDrawing = false
|
||
this.startPoint = null
|
||
this.currentRect = null
|
||
},
|
||
|
||
// 获取标签
|
||
getTags() {
|
||
getSelectedAPI().then((res) => {
|
||
// console.log('res标签', res)
|
||
this.annotationTypeOptions = res.data.map((item) => ({
|
||
label: item.name,
|
||
value: item.id,
|
||
}))
|
||
})
|
||
},
|
||
|
||
handleClose(tag) {
|
||
this.newTagsList.splice(this.newTagsList.indexOf(tag), 1)
|
||
// 根据value删除annotationTypeOptions中的数据
|
||
this.annotationTypeOptions = this.annotationTypeOptions.filter(
|
||
(item) => item.value !== tag,
|
||
)
|
||
},
|
||
|
||
showInput() {
|
||
this.inputVisible = true
|
||
this.$nextTick((_) => {
|
||
this.$refs.saveTagInput.$refs.input.focus()
|
||
})
|
||
},
|
||
handleInputConfirm() {
|
||
let inputValue = this.inputValue
|
||
|
||
if (!inputValue) {
|
||
this.inputVisible = false
|
||
return
|
||
}
|
||
|
||
// 根据inputValue在annotationTypeOptions中查找是否存在
|
||
const index = this.annotationTypeOptions.findIndex(
|
||
(item) => item.value === inputValue,
|
||
)
|
||
if (index === -1) {
|
||
this.newTagsList.push(inputValue)
|
||
this.annotationTypeOptions.push({
|
||
label: inputValue,
|
||
value: inputValue,
|
||
})
|
||
} else {
|
||
this.$message.warning('标签已存在')
|
||
return
|
||
}
|
||
// if (inputValue) {
|
||
// this.newTagsList.push(inputValue)
|
||
// this.annotationTypeOptions.push({
|
||
// label: inputValue,
|
||
// value: inputValue,
|
||
// })
|
||
// }
|
||
this.inputVisible = false
|
||
this.inp
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.upload-info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
font-size: 16px;
|
||
color: #54646c;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.icon-photography {
|
||
width: 47px;
|
||
height: 47px;
|
||
margin-right: 8px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.image-results-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.image-item {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 260px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.image-item-evaluate {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 360px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.result-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.result-image-evaluate {
|
||
width: 100%;
|
||
height: 260px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.annotation-dialog {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
align-items: center;
|
||
}
|
||
|
||
.annotation-preview {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.annotation-canvas-wrapper {
|
||
position: relative;
|
||
border: 1px dashed #dcdfe6;
|
||
border-radius: 8px;
|
||
background: #000;
|
||
}
|
||
|
||
.image-canvas,
|
||
.draw-canvas {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.image-canvas {
|
||
z-index: 1;
|
||
}
|
||
|
||
.draw-canvas {
|
||
z-index: 2;
|
||
cursor: crosshair;
|
||
}
|
||
|
||
.annotation-preview-image {
|
||
max-width: 100%;
|
||
max-height: 520px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.annotation-type {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.annotation-type .label {
|
||
font-weight: 500;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.annotation-info {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
color: #333;
|
||
gap: 16px;
|
||
}
|
||
|
||
.annotation-meta p {
|
||
margin: 0 0 6px 0;
|
||
}
|
||
|
||
.annotation-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.annotation-empty {
|
||
text-align: center;
|
||
color: #999;
|
||
padding: 30px 0;
|
||
}
|
||
|
||
.annotation-list {
|
||
width: 100%;
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 4px;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
.annotation-list-title {
|
||
padding: 12px 16px;
|
||
background: #e4e7ed;
|
||
font-weight: 500;
|
||
color: #333;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
}
|
||
|
||
.annotation-list-content {
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.annotation-list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 16px;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.annotation-list-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.annotation-list-item:hover {
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
.annotation-item-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.annotation-item-type {
|
||
padding: 2px 8px;
|
||
background: #409eff;
|
||
color: #fff;
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.annotation-item-coords {
|
||
color: #606266;
|
||
font-size: 13px;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.icon-hand {
|
||
position: absolute;
|
||
top: 25px;
|
||
right: 25px;
|
||
width: 30px;
|
||
height: 30px;
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
}
|
||
|
||
.icon-hand:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.action-buttons {
|
||
text-align: right;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.card-content {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.card-footer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 100%;
|
||
min-height: 24px;
|
||
}
|
||
|
||
.person-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 10px 18px 0 18px;
|
||
align-items: center;
|
||
}
|
||
|
||
.name {
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.date {
|
||
color: #666;
|
||
/*font-size: 12px;*/
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 10px 18px 0 18px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tag-row {
|
||
display: table;
|
||
width: 100%;
|
||
table-layout: fixed;
|
||
margin: 3px 0 0 0;
|
||
}
|
||
|
||
.tag-item {
|
||
display: table-cell;
|
||
width: 33.33%;
|
||
text-align: left;
|
||
font-size: 12px;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin: 10px 18px 10px 18px;
|
||
}
|
||
|
||
el-image {
|
||
::v-deep .el-image__inner {
|
||
object-fit: contain;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
&:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
::v-deep .image-slot {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #909399;
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
.input-new-tag {
|
||
width: 90px;
|
||
margin-left: 10px;
|
||
vertical-align: bottom;
|
||
}
|
||
.el-tag + .el-tag {
|
||
margin-left: 10px;
|
||
}
|
||
.button-new-tag {
|
||
margin-left: 10px;
|
||
height: 32px;
|
||
line-height: 30px;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
</style>
|