Skip to content

D
DA-Platform

文档服务地址：http://47.92.0.57:3000/ 周报索引地址：http://47.92.0.57:3000/s/NruNXRYmV

Commit cc93ad7f by 张欣玥
Options

image-0608

parent b3ffaf8d
Showing with 829 additions and 738 deletions
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
<template>
<div class="layout" :style="{ height : height_res+'px'}">
<!-- 工具栏-->
<!-- <div class="toolBar">-->
<!-- <el-button-group id="start">-->
<!-- <el-button class="tool-button" type="primary" >保存</el-button>-->
<!-- <el-button class="tool-button" type="primary" >退出</el-button>-->
<!-- </el-button-group>-->
<!-- <el-button-group id="tool">-->
<!--&lt;!&ndash; <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>&ndash;&gt;-->
<!--&lt;!&ndash; <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>&ndash;&gt;-->
<!-- <el-button class="tool-button" type="primary" >多边形标注</el-button>-->
<!-- <el-button class="tool-button" type="primary" >矩形标注</el-button>-->
<!-- <el-button class="tool-button" type="primary" @click="deleteAnnotation">删除标注</el-button>-->
<!-- </el-button-group>-->
<!-- </div>-->
<el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<!-- 侧边栏-->
<el-aside class="sidebar" style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px">
<div class="sidebar-box">
<div class="tool-button-left">
<el-button-group id="start">
<el-button class="tool-button" type="primary" @click="save">保存</el-button>
<el-button class="tool-button" type="primary" >退出</el-button>
</el-button-group>
<div style="margin-top: 10px"></div>
<el-button-group id="tool">
<!-- <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>-->
<!-- <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button>-->
<el-button class="tool-button" type="primary" >多边形标注</el-button>
<el-button class="tool-button" type="primary" >矩形标注</el-button>
<!--测试用 添加标注区域-->
<el-button class="tool-button" type="primary" @click="addLabel">添加标注区域</el-button>
<el-button class="tool-button" type="primary" @click="deleteAnnotation">删除</el-button>
</el-button-group>
</div>
</div>
</el-aside>
<el-aside class="sidebar" style="position: absolute;margin-top: 120px" :style="{ height : height_res*0.97-155+'px'}">
<div class="sidebar-box">
<div>
<div class="img-list-title">图片列表</div>
<div class="img-title-list-box">
<div id="img-title-list" style="user-select:none">
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
</div>
</div>
</div>
</div>
</el-aside>
<!-- <el-aside class="sidebar2" style="position: absolute;width: 3vh;margin-left: 390px;margin-top:10px;margin-right: 0px">-->
<!-- <div class="tool-button-left">-->
<!-- <div>文件</div>-->
<!-- <div class = "tool-button-1">存</div>-->
<!-- <div class = "tool-button-1">退</div>-->
<!-- <div class = "tool-button-1">选</div>-->
<!-- <div class = "tool-button-1">拖</div>-->
<!-- <div style = "margin-bottom: 10px"></div>-->
<!-- <div>标注</div>-->
<!-- <div class = "tool-button-1">多</div>-->
<!-- <div class = "tool-button-1">矩</div>-->
<!-- <div class = "tool-button-1">删</div>-->
<!-- </div>-->
<!-- </el-aside>-->
<!-- 工作台-->
<el-main class="workbench" style="padding: 0px">
<!-- <img src="../../assets/logo.png">-->
<!-- <div style="margin-top: 50px">-->
<!-- <el-button-group id="buttonBar" style="z-index: 500">-->
<!-- <el-button class="tool-button"type="primary" >移动图层</el-button>-->
<!-- <el-button class="tool-button"type="primary" >放大</el-button>-->
<!-- <el-button class="tool-button"type="primary" >缩小</el-button>-->
<!-- <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>-->
<!-- <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>-->
<!-- </el-button-group>-->
<div id="buttonBar"
ref="buttonBarref"
@mousedown="mouseDownHandleelse($event)"
@mouseup="mouseUpHandleelse($event)">
<div class="el-icon-rank" id="button-rank" title="移动图片" style="cursor: pointer"></div>
<div class="el-icon-plus" id="button-plus" title="放大图片" style="cursor: pointer" @click="goBigger"></div>
<div class="el-icon-minus" id="button-minus" title="缩小图片" style="cursor: pointer" @click="goSmaller"></div>
<!-- <span style="">│</span>-->
<div class="el-icon-d-arrow-left" id="button-left" title="上一张图片" style="margin-left: 10px;cursor: pointer" @click="loadPicture_left"></div>
<div class="el-icon-d-arrow-right" id="button-right" title="下一张图片" style="cursor: pointer" @click="loadPicture"></div>
</div>
<!-- </div>-->
<!-- <div :style="{ transform: 'scale('+scaleSize+','+scaleSize+')' }"-->
<div style="position: absolute;margin-left: 10px;margin-top: 10px;pointer-events: none;opacity: 80%;z-index: 260">放大倍率：{{this.scaleSize}}倍</div>
<div :style="{ zoom: scaleSize }"
style = "
height:100%;
width:100%;
user-select: none;
display: flex;
justify-content:flex-start;
overflow: auto"
id = "center_pic">
<!-- <div style="zoom: 2;text-align：center;user-select: none" id = "center_pic">-->
<!-- <img src="https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png" style="pointer-events: none">-->
<!-- <img src="https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg" style="pointer-events: none">-->
<!-- <img src="../../assets/avatar.jpg" style="pointer-events: none;margin: 0 auto">-->
</div>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: 'imageAnnotation',
data () {
return {
pictureId: 1,
scaleSize: 1,
height_res: 0,
activeIndex1: 1,
canvas: '',
ctx: '',
moveBar: {
x: null,
y: null
},
imgNow: {
width: null,
height: null
},
// 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的
testData: [{
relationId: 123,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
labelList: [{
labelId: 0,
label: 'label1',
pointList: [{
pointId: '1-1',
X: 1.1,
Y: 2.2
}, {
pointId: '1-2',
X: 1.2,
Y: 2.3
}]
}, {
labelId: 1,
label: 'label2',
pointList: [{
pointId: '2-1',
X: 1.1,
Y: 2.2
}, {
pointId: '2-2',
X: 1.2,
Y: 2.3
}]
}]
}, {
relationId: 233,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
labelList: [{
labelId: 0,
label: 'label1',
pointList: [{
pointId: '1-1',
X: 1.1,
Y: 2.2
}, {
pointId: '1-2',
X: 1.2,
Y: 2.3
}]
}]
}],
imageNum: -1,
data: [],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
mounted () {
this.getLabelList()
console.log(this.$store.state.imageData)
this.formExchange(this.$store.state.imageData)
console.log(this.data)
// 加载第一张图片
var imgUrl = this.data[0].imageUrl
var img = new Image()
img.src = imgUrl
var _this = this
img.onload = function () {
_this.imgNow.height = img.height
_this.imgNow.width = img.width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var myParent = document.getElementById('center_pic')
var myImage = document.createElement('div')
myImage.style.backgroundImage = 'url(' + imgUrl + ')'
myImage.style.backgroundSize = '100% 100%'
// myImage.src = this.data[0].imageUrl
myImage.style.pointerEvents = 'none'
myImage.style.height = img.height + 'px'
myImage.style.width = img.width + 'px'
myImage.style.zIndex = '250'
myImage.style.flex = '0 0 ' + img.width + 'px'
myImage.id = 'pic_now'
// myImage.style.alignItems = 'center';
myParent.appendChild(myImage)
_this.canvas = document.createElement('canvas')
_this.canvas.width = img.width
_this.canvas.height = img.height
_this.canvas.style.postion = 'absolute'
_this.canvas.style.zIndex = '500'
_this.canvas.style.marginLeft = '-' + img.width + 'px';
// _this.canvas.style.pointerEvents = 'none'
_this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
myParent.appendChild(_this.canvas)
_this.brush_Listener()
}
this.pictureId = 0
// 动态调整窗口高度
this.get_height()
// 当浏览器size改变时，重新计算高度
// eslint-disable-next-line no-redeclare
window.onresize = function () {
// alert("??");
// _this.get_height();
_this.height_res = document.body.clientHeight - 61
}
},
created () {
},
methods: {
goBigger () {
var scale = this.scaleSize
if (scale < 2) {
this.scaleSize = scale + 0.1
} else {
this.scaleSize = 2
}
// var temp = document.getElementById('pic_now');
// temp.style.width = this.imgNow.width * this.scaleSize + 'px';
// temp.style.height = this.imgNow.height * this.scaleSize + 'px';
// temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
// alert(this.scaleSize)
},
goSmaller () {
var scale = this.scaleSize
if (scale > 0.5) {
this.scaleSize = scale - 0.1
} else {
this.scaleSize = 0.5
}
// var temp = document.getElementById('pic_now');
// temp.style.width = this.imgNow.width * this.scaleSize + 'px';
// temp.style.height = this.imgNow.height * this.scaleSize + 'px';
// temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
// alert(this.scaleSize)
},
handleNodeClick (data) {
console.log(data)
},
// 动态高度
get_height () {
this.height_res = document.body.clientHeight - 61
},
changeToolBar (val) {
this.activeIndex1 = val
},
deleteAnnotation: function () {
this.$confirm('确定删除此标注', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteLabel()
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
loadPicture () {
var len = this.data.length
var count = this.pictureId
// alert(len);
// alert(count);
if (count < len - 1) {
console.log("right");
this.pictureId++
this.scaleSize = 1
var imgUrl = this.data[this.pictureId].imageUrl
var img = new Image()
img.src = imgUrl
var _this = this
img.onload = function () {
_this.imgNow.height = img.height
_this.imgNow.width = img.width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var myParent = document.getElementById('center_pic')
for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]);
}
// myParent.removeChild(myParent.childNodes[0])
// myParent.removeChild(myParent.childNodes[1])
var myImage = document.createElement('div')
myImage.style.backgroundImage = 'url(' + imgUrl + ')'
myImage.style.backgroundSize = '100% 100%'
// myImage.src = this.data[0].imageUrl
myImage.style.pointerEvents = 'none'
myImage.style.height = img.height + 'px'
myImage.style.width = img.width + 'px'
myImage.style.flex = '0 0 ' + img.width + 'px'
myImage.id = 'pic_now'
// myImage.style.alignItems = 'center';
myParent.appendChild(myImage)
}
} else {
alert('已经是最后一张图片了')
}
},
loadPicture_left () {
// var len = this.data.length;
var count = this.pictureId
// alert(count);
if (count > 0) {
console.log("left");
this.pictureId--
this.scaleSize = 1
var imgUrl = this.data[this.pictureId].imageUrl
var img = new Image()
img.src = imgUrl
var _this = this
img.onload = function () {
_this.imgNow.height = img.height
_this.imgNow.width = img.width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var myParent = document.getElementById('center_pic')
// myParent.removeChild(myParent.childNodes[0])
// myParent.removeChild(myParent.childNodes[1])
for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]);
}
var myImage = document.createElement('div')
myImage.style.backgroundImage = 'url(' + imgUrl + ')'
myImage.style.backgroundSize = '100% 100%'
// myImage.src = this.data[0].imageUrl
myImage.style.pointerEvents = 'none'
myImage.style.height = img.height + 'px'
myImage.style.width = img.width + 'px'
myImage.style.flex = '0 0 ' + img.width + 'px'
myImage.id = 'pic_now'
// myImage.style.alignItems = 'center';
myParent.appendChild(myImage)
}
//
// var myParent = document.getElementById('center_pic')
// myParent.removeChild(myParent.childNodes[0])
// var myImage = document.createElement('img')
// myImage.src = this.data[this.pictureId].imageUrl
// myImage.style.pointerEvents = 'none'
// myParent.appendChild(myImage)
} else {
alert('已经是第一张图片了')
}
},
async getLabelList () {
// this.data = [{
// label: '图片1',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
// children: [{
// id: 0,
// label: '二级 1-1'
// }]
// }, {
// id: 1,
// label: '图片2',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// children: [{
// label: '二级 2-1'
// }, {
// label: '二级 2-2'
// }]
// }, {
// id: 2,
// label: '图片3',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200303222626.png',
// children: [{
// label: '二级 3-1'
// }, {
// label: '二级 3-2'
// }]
// }]
/**
* 这是一个大致的格式转换
*/
this.data = []
var self = this
this.axios({
method: 'get',
url: '/image',
data: {
relationId: 123
}
}).then(res =>{
if (res.code === 1) {
self.$store.commit('setImageData', res.data)
console.log(this.$store.state.imageData)
}
})
},
//将数据库保存的数据格式转换为前端可以直接使用的格式
formExchange(inputData) {
var index = 0
inputData.forEach(element => {
let newData = {
relationId: element.relationId,
imageUrl: element.imageUrl,
label: this.getImageName(element.imageUrl),
children: element.labelList
}
this.data.push(newData)
index ++
})
this.imageNum = index
},
addLabel () {
let currentImageId = this.pictureId
const newLabel = {label: 'new label'}
this.data[currentImageId].children.push(newLabel)
},
deleteLabel () {
let currentLabelId = 0
let currentImageId = this.pictureId
this.data[currentImageId].children.splice(currentLabelId, 1)
},
/**
* 从图片url中拿到图片名
*/
getImageName (imageUrl) {
let i = -1
for (let index = 0; index < imageUrl.length; index++) {
if (imageUrl[index] == '/') { i = index }
}
return imageUrl.substr(i + 1)
},
// 移动bar
mouseDownHandleelse (event) {
this.moveBar.x = event.pageX - this.$refs.buttonBarref.offsetLeft
this.moveBar.y = event.pageY - this.$refs.buttonBarref.offsetTop
// 改变光标
window.onmousemove = this.mouseMoveHandleelse
},
mouseMoveHandleelse (event) {
let moveLeft = event.pageX - this.moveBar.x + 'px'
let moveTop = event.pageY - this.moveBar.y + 'px'
this.$refs.buttonBarref.style.left = moveLeft
this.$refs.buttonBarref.style.top = moveTop
},
mouseUpHandleelse (event) {
window.onmousemove = null
console.log('鼠标松开了')
},
brush_Listener () {
let r1, r2;
let _this = this;
this.canvas.onmousedown = function (e) {
console.log('onmousedown');
r1 = e.layerX;
r2 = e.layerY;
_this.createR(e, 'begin', r1, r2);
}
this.canvas.onmouseup = function(e) {
console.log('onmouseup');
_this.createR(e, 'end', r1, r2);
r1 = null;
r2 = null;
}
},
createR(e, status, r1, r2) {
let _this = this;
let r;
if (status == 'begin') {
console.log("onmousemove");
_this.canvas.onmousemove = function(e) {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
let rx = e.layerX - r1;
let ry = e.layerY - r2;
_this.ctx.beginPath();
_this.ctx.rect(r1,r2,rx,ry);
// _this.ctx.globalAlpha = 0.5;
_this.ctx.stroke();
// _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height);
}
} else if (status == "end") {
_this.canvas.onmousemove = function(e) {
}
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
let rx = e.layerX - r1;
let ry = e.layerY - r2;
_this.ctx.beginPath();
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
_this.ctx.fillRect(r1,r2,rx,ry);
// _this.ctx.globalAlpha = 0.5;
_this.ctx.stroke();
}
},
createR_2(e, status, r1, r2) {
let _this = this;
let r;
if (status == 'begin') {
console.log("onmousemove");
_this.canvas.onmousemove = function(e) {
// _this.reset();
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let rx = e.layerX - r1;
let ry = e.layerY - r2;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 0.5;
// _this.ctx.strokeStyle = _this.strokeStyle;
// if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
// _this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
// _this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
} else if (status == "end") {
// _this.rebroadcast();
// let interval = setInterval(() => {
// if (_this.loading) {
// clearInterval(interval);
// _this.loading = false;
// } else {
// return
// }
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let rx = e.layerX - r1;
let ry = e.layerY - r2;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 1;
// _this.ctx.strokeStyle = _this.strokeStyle;
// if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
// _this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
// _this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
// _this.step = _this.step + 1;
// if (_this.step < _this.canvasHistory.length - 1) {
// _this.canvasHistory.length = _this.step; // 截断数组
// }
// _this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.onmousemove = null;
// }, 1);
}
},
save() {
//先把格式转换回去
var outputData = []
this.data.forEach(element => {
let newData = {
relationId: element.relationId,
imageUrl: element.imageUrl,
labelList: element.children
}
outputData.push(newData)
})
this.imageNum = this.data.len
this.axios({
method: 'post',
url: '/image',
data: {
outputData
}
}).then(res => {
console.log(res)
if (res.code === 1) {
} else {
}
})
}
}
}
</script>
<style scoped>
#button-left,#button-minus,#button-rank,#button-right,#button-plus{
color: #409EFF;
}
#button-left:hover,#button-minus:hover,#button-rank:hover,#button-right:hover,#button-plus:hover{
color: #2571c8;
}
.layout {
display: flex;
flex-direction: column;
height: 100%;
/*overflow: hidden;*/
background-color: #d9ecff;
}
.toolBar{
margin-top: 20px;
margin-bottom: 20px;
/*background-color: #2c3e50;*/
}
.workbench {
/*border: 2px solid #409eff;*/
margin-left: 20px;
margin-right: 40px;
/*border-radius: 5px;*/
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
height: 97%;
}
.tool-button-left{
text-align: left;
/*padding-top: 20px;*/
/*position: absolute;*/
}
.tool-button-1{
height: 3vh;
width: 3vh;
/*border-radius: 2vh;*/
box-shadow: 2px 2px 5px #dbdbdb;
background-color: #409EFF;
margin-bottom: 1px;
color: white;
line-height: 3vh;
font-size: 1.5vh;
}
.tool-button-1:hover{
background-color: #3387ff;
}
#buttonBar {
/*pointer-events: none;*/
position: fixed;
left: 45%;
top: 85vh;
z-index: 700;
font-size: 4vh;
height: 5vh;
background-color: rgba(255, 255, 255,1);
padding: 10px 50px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
cursor: move;
/*letter-spacing: 0.5vh;*/
}
#buttonBar::selection{
background-color: rgba(255, 255, 255, 0);
}
.sidebar {
height: 97%;
margin-left: 50px;
/*border: 2px solid #409eff;*/
/*border-radius: 5px;*/
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
.img-list-title{
line-height: 40px;
padding: 0 10px;
background: #409EFF;
color: white;
}
.img-title-list-box{
/*height: 800px;*/
height: 100%;
overflow: auto;
background-color: white;
}
.add-file-btn-group >>> button{
margin-top: 3px;
margin-bottom: 3px;
}
</style>
<template>
<div class="layout" :style="{ height : height_res+'px'}">
<!-- 工具栏-->
<!-- <div class="toolBar">-->
<!-- <el-button-group id="start">-->
<!-- <el-button class="tool-button" type="primary" >保存</el-button>-->
<!-- <el-button class="tool-button" type="primary" >退出</el-button>-->
<!-- </el-button-group>-->
<!-- <el-button-group id="tool">-->
<!--&lt;!&ndash; <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>&ndash;&gt;-->
<!--&lt;!&ndash; <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>&ndash;&gt;-->
<!-- <el-button class="tool-button" type="primary" >多边形标注</el-button>-->
<!-- <el-button class="tool-button" type="primary" >矩形标注</el-button>-->
<!-- <el-button class="tool-button" type="primary" @click="deleteAnnotation">删除标注</el-button>-->
<!-- </el-button-group>-->
<!-- </div>-->
<el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<!-- 侧边栏-->
<el-aside class="sidebar" style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px">
<div class="sidebar-box">
<div class="tool-button-left">
<el-button-group id="start">
<el-button class="tool-button" type="primary" @click="save">保存</el-button>
<el-button class="tool-button" type="primary" >退出</el-button>
</el-button-group>
<div style="margin-top: 10px"></div>
<el-button-group id="tool">
<!-- <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>-->
<!-- <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button>-->
<el-button class="tool-button" type="primary" >多边形标注</el-button>
<el-button class="tool-button" type="primary" >矩形标注</el-button>
<!--测试用 添加标注区域-->
<el-button class="tool-button" type="primary" @click="addLabel">添加标注区域</el-button>
<!-- <el-button class="tool-button" type="primary" @click="deleteAnnotation">删除</el-button>-->
</el-button-group>
</div>
</div>
</el-aside>
<el-aside class="sidebar" style="position: absolute;margin-top: 120px" :style="{ height : height_res*0.97-155+'px'}">
<div class="sidebar-box">
<div>
<div class="img-list-title">图片列表</div>
<div class="img-title-list-box">
<div id="img-title-list" style="user-select:none">
<el-tree
:data="data"
:props="defaultProps"
node-key="id"
@node-click="handleNodeClick">
</el-tree>
</div>
</div>
</div>
</div>
</el-aside>
<!-- <el-aside class="sidebar2" style="position: absolute;width: 3vh;margin-left: 390px;margin-top:10px;margin-right: 0px">-->
<!-- <div class="tool-button-left">-->
<!-- <div>文件</div>-->
<!-- <div class = "tool-button-1">存</div>-->
<!-- <div class = "tool-button-1">退</div>-->
<!-- <div class = "tool-button-1">选</div>-->
<!-- <div class = "tool-button-1">拖</div>-->
<!-- <div style = "margin-bottom: 10px"></div>-->
<!-- <div>标注</div>-->
<!-- <div class = "tool-button-1">多</div>-->
<!-- <div class = "tool-button-1">矩</div>-->
<!-- <div class = "tool-button-1">删</div>-->
<!-- </div>-->
<!-- </el-aside>-->
<!-- 工作台-->
<el-main class="workbench" style="padding: 0px">
<!-- <img src="../../assets/logo.png">-->
<!-- <div style="margin-top: 50px">-->
<!-- <el-button-group id="buttonBar" style="z-index: 500">-->
<!-- <el-button class="tool-button"type="primary" >移动图层</el-button>-->
<!-- <el-button class="tool-button"type="primary" >放大</el-button>-->
<!-- <el-button class="tool-button"type="primary" >缩小</el-button>-->
<!-- <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>-->
<!-- <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>-->
<!-- </el-button-group>-->
<div id="buttonBar"
ref="buttonBarref"
@mousedown="mouseDownHandleelse($event)"
@mouseup="mouseUpHandleelse($event)">
<div class="el-icon-rank" id="button-rank" title="移动图片" style="cursor: pointer"></div>
<div class="el-icon-plus" id="button-plus" title="放大图片" style="cursor: pointer" @click="goBigger"></div>
<div class="el-icon-minus" id="button-minus" title="缩小图片" style="cursor: pointer" @click="goSmaller"></div>
<!-- <span style="">│</span>-->
<div class="el-icon-d-arrow-left" id="button-left" title="上一张图片" style="margin-left: 10px;cursor: pointer" @click="loadPicture_left"></div>
<div class="el-icon-d-arrow-right" id="button-right" title="下一张图片" style="cursor: pointer" @click="loadPicture"></div>
</div>
<!-- </div>-->
<!-- <div :style="{ transform: 'scale('+scaleSize+','+scaleSize+')' }"-->
<div style="position: absolute;margin-left: 10px;margin-top: 10px;pointer-events: none;opacity: 80%;z-index: 260">放大倍率：{{this.scaleSize}}倍</div>
<div :style="{ zoom: scaleSize }"
style = "
height:100%;
width:100%;
user-select: none;
display: flex;
justify-content:flex-start;
overflow: auto"
id = "center_pic">
<!-- <div style="zoom: 2;text-align：center;user-select: none" id = "center_pic">-->
<!-- <img src="https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png" style="pointer-events: none">-->
<!-- <img src="https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg" style="pointer-events: none">-->
<!-- <img src="../../assets/avatar.jpg" style="pointer-events: none;margin: 0 auto">-->
</div>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: 'imageAnnotation',
data () {
return {
pictureId: 1,
scaleSize: 1,
height_res: 0,
activeIndex1: 1,
canvas: '',
ctx: '',
moveBar: {
x: null,
y: null
},
imgNow: {
width: null,
height: null
},
canvasAll: [],
// 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的
testData: [{
relationId: 123,
// imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
labelList: [{
labelId: 0,
label: 'label1',
pointList: [{
pointId: '1-1',
X: 1.1,
Y: 2.2
}, {
pointId: '1-2',
X: 1.2,
Y: 2.3
}]
}, {
labelId: 1,
label: 'label2',
pointList: [{
pointId: '2-1',
X: 1.1,
Y: 2.2
}, {
pointId: '2-2',
X: 1.2,
Y: 2.3
}]
}]
}, {
relationId: 233,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
labelList: [{
labelId: 0,
label: 'label1',
pointList: [{
pointId: '1-1',
X: 1.1,
Y: 2.2
}, {
pointId: '1-2',
X: 1.2,
Y: 2.3
}]
}]
}],
imageNum: -1,
data: [],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
mounted () {
this.getLabelList()
console.log(this.$store.state.imageData)
this.formExchange(this.$store.state.imageData)
console.log(this.data)
// 加载第一张图片
var imgUrl = this.data[0].imageUrl
console.log(this.data.length+" 图片张数");
var img = new Image()
img.src = imgUrl
var _this = this
var i = 0;
for (i = 0;i < this.data.length;i++) {
var labelAll = new Array()
_this.canvasAll.push(labelAll)
}
img.onload = function () {
_this.imgNow.height = img.height
_this.imgNow.width = img.width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var myParent = document.getElementById('center_pic')
var myImage = document.createElement('div')
myImage.style.backgroundImage = 'url(' + imgUrl + ')'
myImage.style.backgroundSize = '100% 100%'
// myImage.src = this.data[0].imageUrl
myImage.style.pointerEvents = 'none'
myImage.style.height = img.height + 'px'
myImage.style.width = img.width + 'px'
myImage.style.zIndex = '250'
myImage.style.flex = '0 0 ' + img.width + 'px'
myImage.id = 'pic_now'
// myImage.style.alignItems = 'center';
myParent.appendChild(myImage)
_this.canvas = document.createElement('canvas')
_this.canvas.width = img.width
_this.canvas.height = img.height
// 不加下面这两句的话会拉伸
_this.canvas.style.width = img.width + 'px'
_this.canvas.style.height = img.height + 'px'
_this.canvas.style.postion = 'absolute'
_this.canvas.style.zIndex = '500'
_this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px';
_this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
myParent.appendChild(_this.canvas)
_this.brush_Listener()
}
this.pictureId = 0
// 动态调整窗口高度
this.get_height()
// 当浏览器size改变时，重新计算高度
// eslint-disable-next-line no-redeclare
window.onresize = function () {
// alert("??");
// _this.get_height();
_this.height_res = document.body.clientHeight - 61
}
},
created () {
},
methods: {
goBigger () {
var scale = this.scaleSize
if (scale < 2) {
this.scaleSize = scale + 0.1
} else {
this.scaleSize = 2
}
// var temp = document.getElementById('pic_now');
// temp.style.width = this.imgNow.width * this.scaleSize + 'px';
// temp.style.height = this.imgNow.height * this.scaleSize + 'px';
// temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
// alert(this.scaleSize)
},
goSmaller () {
var scale = this.scaleSize
if (scale > 0.5) {
this.scaleSize = scale - 0.1
} else {
this.scaleSize = 0.5
}
// var temp = document.getElementById('pic_now');
// temp.style.width = this.imgNow.width * this.scaleSize + 'px';
// temp.style.height = this.imgNow.height * this.scaleSize + 'px';
// temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
// alert(this.scaleSize)
},
handleNodeClick (data, node) {
console.log(node)
console.log(data)
// console.log('data.id = ' + node.id)
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d =>{
return d.$treeNodeId == node.id;
}
)
console.log('index = ' + index)
children.splice(index, 1);
},
// 动态高度
get_height () {
this.height_res = document.body.clientHeight - 61
},
changeToolBar (val) {
this.activeIndex1 = val
},
deleteAnnotation: function () {
this.$confirm('确定删除此标注', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteLabel()
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
loadPicture () {
var len = this.data.length
var count = this.pictureId
// alert(len);
// alert(count);
if (count < len - 1) {
console.log('right');
this.pictureId++
this.scaleSize = 1
var imgUrl = this.data[this.pictureId].imageUrl
var img = new Image()
img.src = imgUrl
var _this = this
img.onload = function () {
_this.imgNow.height = img.height
_this.imgNow.width = img.width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var myParent = document.getElementById('center_pic')
for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]);
}
// myParent.removeChild(myParent.childNodes[0])
// myParent.removeChild(myParent.childNodes[1])
var myImage = document.createElement('div')
myImage.style.backgroundImage = 'url(' + imgUrl + ')'
myImage.style.backgroundSize = '100% 100%'
// myImage.src = this.data[0].imageUrl
myImage.style.pointerEvents = 'none'
myImage.style.height = img.height + 'px'
myImage.style.width = img.width + 'px'
myImage.style.zIndex = '250'
myImage.style.flex = '0 0 ' + img.width + 'px'
myImage.id = 'pic_now'
// myImage.style.alignItems = 'center';
myParent.appendChild(myImage)
_this.canvas = document.createElement('canvas')
_this.canvas.width = img.width
_this.canvas.height = img.height
_this.canvas.style.width = img.width + 'px'
_this.canvas.style.height = img.height + 'px'
_this.canvas.style.postion = 'absolute'
_this.canvas.style.zIndex = '500'
_this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px';
_this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
myParent.appendChild(_this.canvas)
// 还原标注
let id = _this.pictureId;
_this.ctx.beginPath();
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
_this.canvasAll[id].forEach(function(element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(element)
})
_this.ctx.stroke();
_this.brush_Listener()
}
} else {
alert('已经是最后一张图片了')
}
},
loadPicture_left () {
// var len = this.data.length;
var count = this.pictureId
// alert(count);
if (count > 0) {
console.log("left");
this.pictureId--
this.scaleSize = 1
var imgUrl = this.data[this.pictureId].imageUrl
var img = new Image()
img.src = imgUrl
var _this = this
img.onload = function () {
_this.imgNow.height = img.height
_this.imgNow.width = img.width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var myParent = document.getElementById('center_pic')
// myParent.removeChild(myParent.childNodes[0])
// myParent.removeChild(myParent.childNodes[1])
for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]);
}
var myImage = document.createElement('div')
myImage.style.backgroundImage = 'url(' + imgUrl + ')'
myImage.style.backgroundSize = '100% 100%'
// myImage.src = this.data[0].imageUrl
myImage.style.pointerEvents = 'none'
myImage.style.height = img.height + 'px'
myImage.style.width = img.width + 'px'
myImage.style.zIndex = '250'
myImage.style.flex = '0 0 ' + img.width + 'px'
myImage.id = 'pic_now'
// myImage.style.alignItems = 'center';
myParent.appendChild(myImage)
_this.canvas = document.createElement('canvas')
_this.canvas.width = img.width
_this.canvas.height = img.height
_this.canvas.style.width = img.width + 'px'
_this.canvas.style.height = img.height + 'px'
_this.canvas.style.postion = 'absolute'
_this.canvas.style.zIndex = '500'
_this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px';
_this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
myParent.appendChild(_this.canvas)
// 还原标注
let id = _this.pictureId;
_this.ctx.beginPath();
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
_this.canvasAll[id].forEach(function(element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(element)
})
_this.ctx.stroke();
_this.brush_Listener()
}
//
// var myParent = document.getElementById('center_pic')
// myParent.removeChild(myParent.childNodes[0])
// var myImage = document.createElement('img')
// myImage.src = this.data[this.pictureId].imageUrl
// myImage.style.pointerEvents = 'none'
// myParent.appendChild(myImage)
} else {
alert('已经是第一张图片了')
}
},
async getLabelList () {
// this.data = [{
// label: '图片1',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
// children: [{
// id: 0,
// label: '二级 1-1'
// }]
// }, {
// id: 1,
// label: '图片2',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// children: [{
// label: '二级 2-1'
// }, {
// label: '二级 2-2'
// }]
// }, {
// id: 2,
// label: '图片3',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200303222626.png',
// children: [{
// label: '二级 3-1'
// }, {
// label: '二级 3-2'
// }]
// }]
/**
* 这是一个大致的格式转换
*/
this.data = []
var self = this
this.axios({
method: 'get',
url: '/image',
data: {
relationId: 123
}
}).then(res =>{
if (res.code === 1) {
self.$store.commit('setImageData', res.data)
console.log(this.$store.state.imageData)
}
})
},
// 将数据库保存的数据格式转换为前端可以直接使用的格式
formExchange (inputData) {
var index = 0
inputData.forEach(element => {
let newData = {
relationId: element.relationId,
imageUrl: element.imageUrl,
label: this.getImageName(element.imageUrl),
children: element.labelList
}
this.data.push(newData)
index++
})
this.imageNum = index
},
// 添加标签前弹窗输入标签名字
addLabel () {
var labelName;
this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
labelName = value;
let currentImageId = this.pictureId
const newLabel = {label: labelName}
this.data[currentImageId].children.push(newLabel)
}).catch(() => {
labelName = 'iss';
let currentImageId = this.pictureId
const newLabel = {label: labelName}
this.data[currentImageId].children.push(newLabel)
});
},
deleteLabel () {
let currentLabelId = 0
let currentImageId = this.pictureId
this.data[currentImageId].children.splice(currentLabelId, 1)
},
/**
* 从图片url中拿到图片名
*/
getImageName (imageUrl) {
let i = -1
for (let index = 0; index < imageUrl.length; index++) {
if (imageUrl[index] == '/') { i = index }
}
return imageUrl.substr(i + 1)
},
// 移动bar
mouseDownHandleelse (event) {
this.moveBar.x = event.pageX - this.$refs.buttonBarref.offsetLeft
this.moveBar.y = event.pageY - this.$refs.buttonBarref.offsetTop
// 改变光标
window.onmousemove = this.mouseMoveHandleelse
},
mouseMoveHandleelse (event) {
let moveLeft = event.pageX - this.moveBar.x + 'px'
let moveTop = event.pageY - this.moveBar.y + 'px'
this.$refs.buttonBarref.style.left = moveLeft
this.$refs.buttonBarref.style.top = moveTop
},
mouseUpHandleelse (event) {
window.onmousemove = null
console.log('鼠标松开了')
},
// 监听鼠标事件
brush_Listener () {
let r1, r2;
let _this = this;
this.canvas.onmousedown = function (e) {
console.log('onmousedown');
r1 = e.layerX;
r2 = e.layerY;
_this.createR(e, 'begin', r1, r2);
}
this.canvas.onmouseup = function(e) {
console.log('onmouseup');
_this.createR(e, 'end', r1, r2);
r1 = null;
r2 = null;
}
},
// 画矩形
createR(e, status, r1, r2) {
let _this = this;
let r;
if (status == 'begin') {
console.log('onmousemove');
_this.canvas.onmousemove = function(e) {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
let rx = e.layerX - r1;
let ry = e.layerY - r2;
_this.ctx.beginPath();
_this.ctx.rect(r1,r2,rx,ry);
// console.log(r1 + ' ' + r2 + ' ' + rx + ' ' + ry)
// 把每个标注画出来
let id = _this.pictureId;
_this.canvasAll[id].forEach(function (element, index) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(index)
})
// _this.ctx.globalAlpha = 0.5;
_this.ctx.stroke();
// _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height);
}
} else if (status == "end") {
_this.canvas.onmousemove = function(e) {
}
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
let rx = e.layerX - r1;
let ry = e.layerY - r2;
// 排除点击就添加标签的可能
if ((rx >= 1 || rx <= -1) && (ry >= 1 || ry <= -1)) {
_this.ctx.beginPath();
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
_this.ctx.fillRect(r1,r2,rx,ry);
// 把每个标注画出来
let id = _this.pictureId;
_this.canvasAll[id].forEach(function(element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(element)
})
// 存到记录里
var num = [r1,r2,rx,ry]
_this.canvasAll[id].push(num)
_this.addLabel()
// console.log('id = ',id)
// console.log(_this.canvasAll)
// _this.ctx.globalAlpha = 0.5;
_this.ctx.stroke();
}
else{
let id = _this.pictureId;
_this.canvasAll[id].forEach(function(element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(element)
})
}
}
},
save() {
//先把格式转换回去
var outputData = []
this.data.forEach(element => {
let newData = {
relationId: element.relationId,
imageUrl: element.imageUrl,
labelList: element.children
}
outputData.push(newData)
})
this.imageNum = this.data.len
this.axios({
method: 'post',
url: '/image',
data: {
outputData
}
}).then(res => {
console.log(res)
if (res.code === 1) {
} else {
}
})
}
}
}
</script>
<style scoped>
#button-left,#button-minus,#button-rank,#button-right,#button-plus{
color: #409EFF;
}
#button-left:hover,#button-minus:hover,#button-rank:hover,#button-right:hover,#button-plus:hover{
color: #2571c8;
}
.layout {
display: flex;
flex-direction: column;
height: 100%;
/*overflow: hidden;*/
background-color: #d9ecff;
}
.toolBar{
margin-top: 20px;
margin-bottom: 20px;
/*background-color: #2c3e50;*/
}
.workbench {
/*border: 2px solid #409eff;*/
margin-left: 20px;
margin-right: 40px;
/*border-radius: 5px;*/
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
height: 97%;
}
.tool-button-left{
text-align: left;
/*padding-top: 20px;*/
/*position: absolute;*/
}
.tool-button-1{
height: 3vh;
width: 3vh;
/*border-radius: 2vh;*/
box-shadow: 2px 2px 5px #dbdbdb;
background-color: #409EFF;
margin-bottom: 1px;
color: white;
line-height: 3vh;
font-size: 1.5vh;
}
.tool-button-1:hover{
background-color: #3387ff;
}
#buttonBar {
/*pointer-events: none;*/
position: fixed;
left: 45%;
top: 85vh;
z-index: 700;
font-size: 4vh;
height: 5vh;
background-color: rgba(255, 255, 255,1);
padding: 10px 50px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
cursor: move;
/*letter-spacing: 0.5vh;*/
}
#buttonBar::selection{
background-color: rgba(255, 255, 255, 0);
}
.sidebar {
height: 97%;
margin-left: 50px;
/*border: 2px solid #409eff;*/
/*border-radius: 5px;*/
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
.img-list-title{
line-height: 40px;
padding: 0 10px;
background: #409EFF;
color: white;
}
.img-title-list-box{
/*height: 800px;*/
height: 100%;
overflow: auto;
background-color: white;
}
.add-file-btn-group >>> button{
margin-top: 3px;
margin-bottom: 3px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment