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