vue如何使用js对图片进行点击标注圆点并记录它的坐标 vue如何使用js对图片进行点击标

功能
标注前
标注后
打印记录坐标点
代码实现

判断鼠标是否右击
阻止冒泡行为和默认右键菜单事件
给图片加点击事件
画点

最近和深度学习方面搞个东西，需要前端对图片进行标注，呃，这个我上网也没找到什么好方法，只能自己通过js来实现，不过现在刚初步做出一点效果，样式没留意，挺丑的，嘻嘻。

功能

点击开始标注按钮后才可以对图片进行标注
在图片区域内单机左键才可进行加点
在标注点上右击删除该点，在图片上右击无效果
完成标注后点击完成标注按钮后，结束标注，此后点击图片不再加点

标注前

文章图片

标注后

文章图片

打印记录坐标点这个坐标看你自己需求，是相对图片的百分比坐标，还是相对整个窗口的坐标，js都可以实现的

文章图片

代码实现我先说一说关键功能实现的js代码（里面涉及了date的数据，所以需要看下后面的全部代码实现），后面就是全部代码

判断鼠标是否右击

if(e.button !== 2)//判断鼠标是否右击

阻止冒泡行为和默认右键菜单事件

document.getElementById('myBiaoZhu').oncontextmenu=((e)=>{if(e && e.preventDefault) {//阻止默认浏览器动作(W3C)e.preventDefault()} else {//IE中阻止函数器默认动作的方式window.event.returnValue = https://www.it610.com/article/false}return false})//阻止冒泡行为和默认右键菜单事件

给图片加点击事件

document.getElementById('myBiaoZhu').onmousedown=(e)=>{e = e || window.eventif(e.button !== 2){//判断是否右击if(this.canBiaoZhu){//判断是否可以进行标注var x = e.offsetX || e.layerXvar y = e.offsetY || e.layerYconsole.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)this.banMa.push({id:this.banMa.length+1,x,y})this.createMarker(x,y)}}}

画点

createMarker(x, y) {var div = document.createElement('div')div.className = 'marker'div.id = 'marker'+this.banMa.lengthy = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize/2x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize/2div.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.oncontextmenu=((e)=>{//阻止冒泡行为和默认右键菜单事件，同时删除该点var id = e.target.iddocument.getElementById('myBiaoZhuDiv').removeChild(div)this.banMa = this.banMa.filter(item=>item.id!= id.slice(6,id.length))if(e && e.preventDefault) {//阻止默认浏览器动作(W3C)e.preventDefault()} else {//IE中阻止函数器默认动作的方式window.event.returnValue = https://www.it610.com/article/false}return false})document.getElementById('myBiaoZhuDiv').appendChild(div)},

html：

css：

#myBiaoZhuDiv{position:relative; img{border:solid 1px #000; display:inline-block; margin:100px 100px; z-index: 1; }.marker{position:absolute; border-radius: 50%; z-index: 999; }}

js：

【vue如何使用js对图片进行点击标注圆点并记录它的坐标】以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。