vue如何使用js对图片进行点击标注圆点并记录它的坐标
更新时间：2022年04月28日 11:20:53 作者：清新小伙子
这篇文章主要介绍了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：
<template>
<div class="myBiaoZhu" id="myBiaoZhuDiv">
<img id="myBiaoZhu" src="./1.png" alt="" style="height: 400px;width: 400px;">
<el-button type="text" @click="startBiaoZhu">开始标注</el-button>
<el-button type="text" @click="endBiaoZhu">标注完成</el-button>
</div>
</template>
css：
<style lang="less">
#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;
}
}
</style>
js：
<script>
export default {
name: '',
components: {},
data () {
return {
banMa:[], //斑马线的数组
canBiaoZhu:false, //是否可以进行标注
pointColor:'red', //点的颜色
pointSize:10, //点的大小
}
},
methods: {
//开始标注
startBiaoZhu(){
this.canBiaoZhu = true
},
//完成标注
endBiaoZhu(){
this.canBiaoZhu = false
},
//画点
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)
},
},
watch: {},
computed: {},
created () {
},
mounted () {
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)
}
}
}
},
beforeDestroy () {
},
destroyed () {
},
}
</script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
.sync修饰符是Vue中用于实现子组件修改父组件传递的props值并更新到父组件的功能,它实际上是一个语法糖,将子组件的props绑定到一个名为update:propName的自定义事件上,本文给大家介绍了vue3中sync修饰符的使用,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了详解使用mpvue开发github小程序总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了Vue+ElementUI启动vue卡死的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了Vue AST源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本文主要介绍了VUE3之Non-Props属性的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章给大家介绍了Vue3快速实现文件上传OSS的方法,上传文件可以说是经典的需求了,在后台管理项目中随处可见,一般是由前端进行文件上传,然后再由后端去处理,本文旨在实现上传功能,不考虑额外的功能（如文件尺寸限制）,感兴趣的朋友可以参考下2024-01-01
这篇文章主要介绍了使用vue实现自定义多选与单选的答题功能,vue组件中在表单方面提供了一个v-model指令，非常好用，具体实现过程大家跟随脚本之家小编一起看看吧2018-07-07
这篇文章主要介绍了Vue数据双向绑定原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要给大家介绍了关于VUE跳转外部链接与网页的方法,记录一下在vue项目中如何实现跳转到一个新页面,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了nginx+vue.js实现前后端分离的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论