前言：
今天你们对“html图片标记”大约比较关注，小伙伴们都想要知道一些“html图片标记”的相关文章。那么小编在网络上网罗了一些对于“html图片标记””的相关知识，希望同学们能喜欢，大家一起来了解一下吧！简介
Vue-Picture-BD-Marker（以下简称Vmarker）是一款基于ui-picture-bd-marker 1.3.3+封装的一个自定义Vue控件，用来在图片上进行标注的工具。 Vmarker可以显示与编辑标注，提供基本坐标定位（x,y,width,height）标注框的位置。
该插件优势，
可以实现响应式，即放大和缩小浏览器窗口后标注的内容也会随着改变，可获得所有标点信息的x,y的坐标信息，可以直接在后台记录值，方便用于回显标注信息
vue-picture-bd-marker标注功能
安装
npm install vue-picture-bd-marker -S
引入
import {AIMarker} from 'Vue-Picture-BD-Marker'需要特别注意，根据官网的提示是会提示错误的，找不到Vue-Picture-BD-Marker包需要使用下面的方式进行引入
import {AIMarker} from 'vue-picture-bd-marker'使用直接使用<ui-marker>标签，就可以引入该组件了，就可以简单使用了
<template> <div> ... <!-- --> <ui-marker ref="aiPanel-editor" class="ai-observer" v-bind:uniqueKey="uuid" :ratio="16/9" v-bind:imgUrl="currentImage"> </ui-marker> </div></template><script>import {AIMarker} from 'Vue-Picture-BD-Marker'export default { name: "stagePicPage", components: { 'ui-marker':AIMarker }, data() { uuid:'0da9130', currentImage:"url或base64" }, methods:{ ... }}</script>监听事件的使用<template> <div> ... <!-- --> <ui-marker ref="aiPanel-editor" class="ai-observer" v-bind:uniqueKey="uuid" :ratio="16/9" @vmarker:onAnnoSelected="onAnnoSelected" @vmarker:onAnnoAdded="onAnnoAdded" @vmarker:onUpdated="onUpdated" @vmarker:onReady="onReady" @vmarker:onImageLoad="onImageLoad" v-bind:readOnly="readOnly" v-bind:imgUrl="currentImage"> </ui-marker> </div></template><script>import {AIMarker} from 'Vue-Picture-BD-Marker'export default { name: "stagePicPage", components: { 'ui-marker':AIMarker }, data() { uuid:'0da9130', readOnly:false,//是否只读 currentImage:"url或base64" }, methods:{ ... }}</script>图片中打多个标签<template> <div> <h1>{{msg}}</h1> <div style="width: 80%;height: 100%"> <ui-marker ref="aiPanel-editor" class="ai-observer" :ratio="16/9" v-bind:imgUrl="currentImage"> </ui-marker> <button @click="initMarker">打标签</button> </div> </div></template><script> import {AIMarker} from 'vue-picture-bd-marker' import image from '../image/23027844.jpeg' export default { name: 'PictureBdMarker', components: { 'ui-marker':AIMarker }, data(){ return { msg: ' vue-picture-bd-marker 图片标注', uuid:'0da9130', currentImage: image } }, created() { }, methods: { initMarker(){ this.$refs['aiPanel-editor'].getMarker().renderData([ { tag: "id01", tagName: "花", position: { x: "41.026%", x1: "53.790000000000006%", y: "22.678%", y1: "40.496%" }, uuid: "5559A20B25712D9D" } ]); this.$refs['aiPanel-editor'].getMarker().renderData([ { tag: "id03", tagName: "美女", position: { x: "41.026%", x1: "53.790000000000006%", y: "22.678%", y1: "40.496%" }, uuid: "5559A20B25712D9D" } ]); } } }</script>文档地址：
github地址：
获得所有标注信息
this.$refs['aiPanel-editor'].getMarker().getData();注意：
该插件在使用时没有监听点击事件，同时渲染的时候只能渲染纯文本信息，所以在某些情况使用的时候无法拓展更多的功能，下篇文章将会对该插件进行改造，实现对html的渲染，绑定监听事件的功能；
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
