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 = false
        }
        return false
      })      //阻止冒泡行为和默认右键菜单事件

给图片加点击事件

document.getElementById('myBiaoZhu').onmousedown=(e)=>{
        e = e || window.event
        if(e.button !== 2){       //判断是否右击
          if(this.canBiaoZhu){    //判断是否可以进行标注
            var x = e.offsetX || e.layerX
            var y = e.offsetY || e.layerY
            console.log(x,y)
            var myImg = document.querySelector("#myBiaoZhu")
            var currWidth = myImg.clientWidth
            var currHeight = myImg.clientHeight
            var ProportionWidthInImg = x/currWidth
            var 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.length
    y = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize/2
    x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize/2
    div.style.width = this.pointSize + 'px'
    div.style.height = this.pointSize + 'px'
    div.style.backgroundColor = this.pointColor
    div.style.left = x + 'px'
    div.style.top = y + 'px'
    div.oncontextmenu=((e)=>{  //阻止冒泡行为和默认右键菜单事件，同时删除该点
      var id = e.target.id
      document.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 = false
      }
      return false
    })  
    document.getElementById('myBiaoZhuDiv').appendChild(div)
  },

html：

css：

js：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。