vue3图片描点标记

<el-dialog v-model="markVisible" title="图片标注" width="70%" :before-close="cancelBiaoZhu"><el-row><el-col :span="24"><span>(图片标注可点击鼠标右键进行撤销)</span></el-col><el-col :span="24"><div class="myBiaoZhu" id="myBiaoZhuDiv" v-if="isRefresh"><img id="myBiaoZhu" :src="data:imageUrl" style="max-width: 800px" /></div></el-col></el-row><!--      展示标记点位置--><!--      <div class="showBiaoZhu" id="showBiaoZhuDiv">--><!--&lt;!&ndash;        style="max-width: 600px"&ndash;&gt;--><!--        <img id="showBiaoZhu" :src="data:imageUrl" style="width: 600px;height: 200px"/>--><!--      </div>--><template #footer><span class="dialog-footer"><el-button @click="cancelBiaoZhu" size="default">取 消</el-button><el-button type="primary" size="default" @click="endBiaoZhu">结束标注</el-button></span></template></el-dialog>#myBiaoZhuDiv {position: relative;cursor: pointer;img {border: solid 1px #000;display: inline-block;margin: 20px 20px;z-index: 1;}.marker {position: absolute;border-radius: 50%;z-index: 999;}
}

// 开始标注startBiaoZhu() {this.markVisible = truethis.canBiaoZhu = true// console.log('ppp',this.banMa)this.$nextTick(() => {// let this.tableData[this.picturePropIndex].buList[this.pictureIndex].banMa// console.log('ppp',document.getElementById('myBiaoZhu'))document.getElementById('myBiaoZhu').oncontextmenu = (e) => {if (e && e.preventDefault) {//阻止默认浏览器动作(W3C)e.preventDefault()} else {//IE中阻止函数器默认动作的方式window.event.returnValue = false}return false} //阻止冒泡行为和默认右键菜单事件let arr = JSON.parse(JSON.stringify(this.banMa))// 如果存在已经有位置信息的点直接回显arr.forEach((v) => {// console.log(')0))0',v.proportionHeightInImg)if (v.proportionHeightInImg != null) {setTimeout(()=>{// this.createMarker(v.x,v.y,v.sort)let markImg = document.querySelector('#myBiaoZhu')let markWidth = markImg.clientWidthlet markHeight = markImg.clientHeight// console.log('进行',markWidth,markHeight)let div = document.createElement('div')div.className = 'marker'div.id = 'marker' + v.sortdiv.style.width = this.pointSize + 'px'div.style.height = this.pointSize + 'px'div.style.backgroundColor = this.pointColordiv.style.left = markWidth * v.proportionWidthInImg + document.getElementById('myBiaoZhu').offsetTop - this.pointSize / 2 + 'px'div.style.top = markHeight * v.proportionHeightInImg + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize / 2 + 'px'div.style.borderRadius = '50%'div.style.position = 'absolute'div.style.zIndex = 999div.innerHTML = `${v.sort}`div.style.color = '#ffffff'div.style.textAlign = 'center'div.style.lineHeight = this.pointSize + 'px'div.oncontextmenu = (e) => {// this.isRefresh = falsevar sort = e.target.id// console.log('sss',sort)document.getElementById('myBiaoZhuDiv').removeChild(div)this.banMa.forEach((item, index) => {if (item.sort == sort.slice(6, sort.length)) {// console.log('进',item.id)// delete this.banMa[index];this.banMa[index].x = nullthis.banMa[index].y = nullthis.banMa[index].proportionHeightInImg = nullthis.banMa[index].proportionWidthInImg = null}// console.log('&&&&',item.id,id.slice(6,id.length),item.id == id.slice(6,id.length))})this.canBiaoZhu = trueif (e && e.preventDefault) {//阻止默认浏览器动作(W3C)e.preventDefault()} else {//IE中阻止函数器默认动作的方式window.event.returnValue = false}return false} //阻止冒泡行为和默认右键菜单事件，删除该点、document.getElementById('myBiaoZhuDiv').appendChild(div)},500)}})document.getElementById('myBiaoZhu').onmousedown = (e) => {// console.log('进')e = e || window.eventif (e.button !== 2) {//判断是否右击if (this.canBiaoZhu) {//判断是否可以进行标注var x = e.offsetX || e.layerXvar y = e.offsetY || e.layerY// console.log(x,y)var myImg = document.querySelector('#myBiaoZhu')var currWidth = myImg.clientWidthvar currHeight = myImg.clientHeightvar proportionWidthInImg = x / currWidthvar proportionHeightInImg = y / currHeight// console.log("图片比例高度："+proportionHeightInImg)// console.log("图片比例宽度："+proportionWidthInImg)let obj = {// id:this.banMa.length+1,sort: null,x,y,proportionHeightInImg,proportionWidthInImg,}let arr = JSON.parse(JSON.stringify(this.banMa))let flag = falsefor (let i = 0; i < arr.length; i++) {if (this.banMa[i].proportionHeightInImg == null) {// console.log('jinjinjin')flag = trueobj.sort = Number(this.banMa[i].sort)this.banMa[i] = objbreak}}if (obj.sort === this.banMa[this.banMa.length - 1].sort && this.banMa[this.banMa.length - 1].x != null) {// console.log('进')this.canBiaoZhu = false}if (obj.sort != null) {this.createMarker(x, y, obj.sort)} else {ElMessage({message: '标注点数已达上限！',type: 'warning',})}// if(this.banMa[this.banMa.length-1].id===obj.id){//   this.canBiaoZhu = false// }// console.log('ppp')// var markImg = document.querySelector("#showBiaoZhu")// var markWidth = markImg.clientWidth// var markHeight = markImg.clientHeight// var div = document.createElement('div')// div.className = 'show'// div.style.width = this.pointSize + 'px'// div.style.height = this.pointSize + 'px'// div.style.backgroundColor = this.pointColor// div.style.left = markWidth*ProportionWidthInImg + document.getElementById('showBiaoZhu').offsetTop- this.pointSize/2 + 'px'// div.style.top = markHeight*ProportionHeightInImg + document.getElementById('showBiaoZhu').offsetLeft - this.pointSize/2 + 'px'// div.style.borderRadius = '50%'// div.style.position='absolute'// div.style.zIndex= 999// div.innerHTML=`${this.banMa.length}`// div.style.color='#ffffff'// div.style.textAlign='center'// div.style.lineHeight = this.pointSize + 'px'// document.getElementById('showBiaoZhuDiv').appendChild(div)} else {ElMessage({message: '标注点数已达上限！',type: 'warning',})}} else {console.log(e)}}})},//画点createMarker(x, y, sort) {// console.log('ppp',id)var div = document.createElement('div')div.className = 'marker'div.id = 'marker' + sorty = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize / 2x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize / 2// console.log('@@@',document.getElementById('myBiaoZhu').offsetTop,document.getElementById('myBiaoZhu').offsetLeft)div.style.width = this.pointSize + 'px'div.style.height = this.pointSize + 'px'div.style.backgroundColor = this.pointColordiv.style.left = x + 'px'div.style.top = y + 'px'div.style.borderRadius = '50%'div.style.position = 'absolute'div.style.zIndex = 999div.innerHTML = `${sort}`div.style.color = '#ffffff'div.style.textAlign = 'center'div.style.lineHeight = this.pointSize + 'px'div.oncontextmenu = (e) => {// this.isRefresh = false// console.log('pppp',e)var sort = e.target.iddocument.getElementById('myBiaoZhuDiv').removeChild(div)this.banMa.forEach((item, index) => {if (item.sort == sort.slice(6, sort.length)) {// console.log('进',item.id)// delete this.banMa[index];this.banMa[index].x = nullthis.banMa[index].y = nullthis.banMa[index].proportionHeightInImg = nullthis.banMa[index].proportionWidthInImg = null}// console.log('&&&&',item.id,id.slice(6,id.length),item.id == id.slice(6,id.length))})this.canBiaoZhu = trueif (e && e.preventDefault) {//阻止默认浏览器动作(W3C)e.preventDefault()} else {//IE中阻止函数器默认动作的方式window.event.returnValue = false}return false} //阻止冒泡行为和默认右键菜单事件，删除该点document.getElementById('myBiaoZhuDiv').appendChild(div)},//结束标注endBiaoZhu() {this.tableData[this.picturePropIndex].buList[this.pictureIndex].banMa = JSON.parse(JSON.stringify(this.banMa))this.cancelBiaoZhu()this.markVisible = falsethis.canBiaoZhu = false// this.comfirmAdd()},// 取消标注cancelBiaoZhu() {this.markVisible = falsethis.canBiaoZhu = falsethis.banMa.forEach((v) => {let div = document.getElementById('marker' + v.sort)if (div) {document.getElementById('myBiaoZhuDiv').removeChild(div)}})this.comfirmAdd()this.banMa = []},

获取已经有标注信息的数据并回显，通过拧紧信息带括号判断从数字几开始标注，到几结束，限制标注个数

// 步序图片上传handleChildUpImg(row, index, propIndex) {// this.cancelBiaoZhu()this.picturePropIndex = propIndexthis.pictureIndex = indexthis.pictureDialogVisible = truelet str = row.stepNameif (str.indexOf('（') != -1 || str.indexOf('(') != -1) {// console.log('row',row.stepName)this.banMa = []this.pointSortList = []var num1, num2, num3if (str.indexOf('（') != -1) {num1 = str.indexOf('（')} else if (str.indexOf('(') != -1) {num1 = str.indexOf('(')} else {num1 = ''}// console.log('次数',str.match(/-/g).length,str.indexOf('-',2))num2 = str.indexOf('-')if(str.match(/-/g).length===2){num2 = str.indexOf('-',num2+1)}if (str.indexOf(')') != -1) {num3 = str.indexOf(')')} else if (str.indexOf('）') != -1) {num3 = str.indexOf('）')} else {num3 = ''}var start = str.slice(num1 + 1, num2)var end = str.slice(num2 + 1, num3)for (var i = start; i <= end; i++) {this.pointSortList.push({ sort: Number(i), x: null, y: null, proportionHeightInImg: null, proportionWidthInImgInImg: null })}// console.log('进行',start,end)this.isNingJin = trueif (row.banMa) {// this.banMa = []row.banMa.forEach((v, i) => {if (v.sort) {this.banMa.push({ sort: v.sort, x: null, y: null, proportionHeightInImg: v.proportionHeightInImg, proportionWidthInImg: v.proportionWidthInImg })} else {let sort = Number(i) + Number(start)this.banMa.push({ sort, x: null, y: null, proportionHeightInImg: v.proportionHeightInImg, proportionWidthInImg: v.proportionWidthInImg })}})} else {// console.log('jin',start,end)// var tips = str.slice(0, num1)// for (var i = start; i <= end; i++) {//   this.banMa.push({sort:Number(i),//     x:null,//     y:null,//     proportionHeightInImg:null,//     proportionWidthInImgInImg:null})// }// console.log('步序',this.banMa)this.banMa = [...this.pointSortList]}// console.log('oooo',this.banMa,row.banMa)} else {this.isNingJin = falsethis.banMa = []}if (row.pictureUrl) {this.imageUrl = this.mateUrl + row.pictureUrlthis.picUrl = row.pictureUrl} else {this.imageUrl = ''this.picUrl = ''}// if(row.banMa){//   this.banMa = row.banMa// }else{//   this.banMa = []// }},

效果

vue3图片描点标记相关推荐

Vue3图片打点自定义标记颜色形状(完整教程可直接复制项目)
在项目中我们总能遇到一些奇怪的需求.比如如标题描述一样在图片标记点位.文字.和自定义的形状? 1.先定义一块图片的区域~ <div class="mapContainer" ...
v-viewer：vue3图片查看器
v-viewer:一个方便易用的vue3 图片查看器 v-viewer中文文档一.安装 1.npm/yarn 安装 npm install v-viewer@next or yarn add vie ...
vue3 图片懒加载
vue3 图片懒加载基本代码封装为自定义指令基本代码 <template><div><div style="height:2000px"> ...
canvas在图片上绘制标记，可拖拽、缩放，基于ZRender
如下图所示,在图片上做标记,如圆形.矩形等. 该demo实现画布在页面布局中缩放后居中显示,可拖拽.缩放.做标记说明. 项目下载地址:https://gitlab.com/zhangcw66/draw ...
php怎么实现在图片上做标记,如何给图片添加标记(notes)？
最近几天没有更新文章,有点小忙!呵呵,不说废话,直接进入正题. 今天主要说的是,如何在图片上添加标记(一个或多个).从网上搜到很多的例子,总体来说,感觉这个很不错!! 我就简单说一下这个标记是怎么存储 ...
CSS控制，使用图片作为序列标记
今天看以前写的网页设计作业,看见要将图片作为项目标记显示,而我居然使用的是背景图片插入完成了这一效果,觉得我当时的脑回路也是蛮神奇的,现在总结实现的方法,也让自己加深印象吧! 实现效果: 方法一:自然 ...
使用java+OpenCV进行图片对比并标记差异部分（支持中文图片路径）
1.设计方法为: 首先将两个图片转化为灰度图: 进行灰度图比对,1为完全相同,此处可以插入阀值: 计算两个灰度图的绝对差值并放入一个新的Mat对象: 将新的mat对象进行绝对差值化: 寻找轮廓图并用红 ...
python对比两张图片的不同并圈起来,比较两幅图像/图片，并标记差异
问题1: 这篇文章展示了比较两张图片的方法.最简单的方法可能是:from PIL import Image from PIL import ImageChops im1 = Image.open(&q ...
使用CSS给图片加上角标记
实现后的效果,图片左上角有了标记信息主要是通过定位和伪类实现左上角代码 <html> <div class="wrap"><img width=& ...

vue3图片描点标记

vue3图片描点标记相关推荐

最新文章

热门文章