Vmarker图片标注工具使用文档

最新推荐文章于 2024-07-25 11:06:07 发布
最新推荐文章于 2024-07-25 11:06:07 发布
阅读量2.9k 收藏 5
点赞数
分类专栏： vue 文章标签： VMarker 图片标注插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011200562/article/details/111191400
版权
本文介绍了Vue-Picture-BD-Marker，一款简化Vue开发中图片标注的封装控件，提供坐标定位功能，适合快速标注图片特性。它基于ui-picture-bd-marker，适用于熟悉Vue的开发者，并兼容现代浏览器和IE9以上版本。
摘要由CSDN通过智能技术生成

介绍

Vue-Picture-BD-Marker是什么？

Vue-Picture-BD-Marker（以下简称Vmarker）是一款基于ui-picture-bd-marker 1.3.3+封装的一个自定义Vue控件，用来在图片上进行标注的工具。 Vmarker可以显示与编辑标注，提供基本坐标定位（x,y,width,height）标注框的位置。

Vmarker针对熟悉Vue的开发小伙伴使用。如果不太熟悉，可以基于ui-picture-bd-marker自行封装

npm install vue-picture-bd-marker -S

效果预览

通过Vmarker，可以标注图片各个需要的特性

 

支持环境

现代浏览器和 IE9 及以上（需要 polyfills）。 支持服务端渲染。

 

文档地址：https://vmarker.sagocloud.com/doc/

前端一枚
关注
专栏目录
html点击图片放大_vue 插件之picture-markert图片标注
weixin_39645343的博客
11-25 1342
简介Vue-Picture-BD-Marker(以下简称Vmarker)是一款基于ui-picture-bd-marker 1.3.3+封装的一个自定义Vue控件，用来在图片上进行标注的工具。 Vmarker可以显示与编辑标注，提供基本坐标定位(x,y,width,height)标注框的位置。该插件优势，可以实现响应式，即放大和缩小浏览器窗口后标注的内容也会随着改变，可获得所有标点信息的x,y的坐...
onready怎么加img_用插件VMarker在vue中给图片加标记
weixin_29543939的博客
12-31 974
插件VMarker:Vmarker是基于ui-picture-bd-marker的vue封装，当Vmarker不足并存在现有要求或难以基于Vmarker扩展，此时可以绕过Vmarker进行扩展，直接使用ui-picture-bd-marker扩展即可。使用方法：1.安装依赖npm install vue-picture-bd-marker2.在vue文件中引入Vmarker，为VMarker设定别...
VMware的使用
A____o___A的博客
04-07 2375
1.通过360软件管家下载VMware 2.打开VMware创建新的虚拟机 3.选择自定义（高级），点击下一步 4.点击下一步 5.选择稍后安装操作系统，点击下一步 6.选择Liunx，版本为centOs7 64位 ，点击下一步 7，选择存储位置，不建议C盘，点击下一步 8，选择处理器，根据自己的电脑配置选择，我选择的是默认的 9.最小内存量，最少一个G，我选择默认的 10，选择默认 11，分配磁盘大小，默认20G，可以根据自己需求更改 1 12，给你的虚拟机命名 13，完成虚拟机的
vue-picture-bd-marker 简单的数据标注
weixin_43045869的博客
07-14 4170
参考文档：https://github.com/sunshengfei/ui-picture-bd-marker https://vmarker.sagocloud.com/quick_start/#a-qs-vue 代码： <template> <div> <el-form :model="formInline"> <el-form-item label="数据集："> <el-select v-model="
前端页面对图片标注，绘制红色矩形框并在上边框添加文字，可以对一张图片进行多个标注，获取标注信息存到数据库。等下次加载把标注信息再复现到图片上，可以对标注的矩形框进行删除(二）
最新发布
qq_40739261的博客
07-25 572
前端页面对图片标注，绘制红色矩形框并在上边框添加文字，可以对一张在图片上绘制红色矩形框并且可以在矩形框上添加文字说明，进行了功能的细化，逻辑上的处理，增加了一些功能,完善了一些，处理的一些存在的问题。在图片上进行红色矩形框的绘制并且在上边框添加文字，同时可以对一张图片进行多个标注，可以获取标注信息保存起来，存到数据库。3、鼠标按下收起绘制好了一个矩形，可以输入文字描述，点击添加可以对红色矩形框标注添加文字说明。5、点击清除，会清除图片上临时的红色矩形框标注信息，然后点击保存才是真正对图片上的标注进行了清除；
前端开发——图片标注工具
寒风的技术博客
10-28 8056
游戏开发，少不了要与UI打交道啦，无论你是策划，测试，or 前端程序员。 下面推荐两款UI布局中可以用到的工具。 一 MarkMan 下载地址：http://www.getmarkman.com/ Adobe公司的，安装之前需要先安装Adobe Air 1 可以量水平距离和垂直距离，单位：像素（px） 2 获取一个点的的坐标，坐标原点为左上角 3 获取一个点的颜色，十六进制R
将bbox注释信息绘制到图片上
fangweijiex的博客
07-13 334
将bbox换到图片上
实用前端标注图片剪裁工具-AILabel.js
wang_xuan_1992的博客
11-03 3799
AILabel类库是一款集打点、线段、多段线、矩形、多边形、圆圈、涂抹等多标注形式于一体，附加文本（Text）、标记（Marker）、缩略图（EagleMap）、Scale（比例尺）等控件以及Util等辅助工具的在线Web端标注工具库。目前已被广泛应用于多标注项目中 文档目录 源代码：https://github.com/dingyang9642/AILabel API文档：http://ailabel.com.cn/public/ailabel/api/index.html Demo文档：http://a
前端标注开源库
gwdgwd123的博客
11-22 985
前端 标注开源库
vue3图片描点标记
soclear_的博客
02-08 2512
图片标记描点
前端开源库-image-to-ascii
08-30
前端开源库-image-to-asciiimage to ascii，node.js模块，用于将图像转换为ascii艺术。
Vue简单的图片区域裁切组件
08-10
在压缩包`m-crop-master`中，可能包含了完整的源代码、示例、文档等资源，你可以通过阅读和研究这些资料来更深入地理解和使用这个Vue图片裁切组件。同时，别忘了在实际项目中进行充分的测试，以确保组件的稳定性和...
java.lang.ClassCastException: com.example.vmarker.app.VMApplication cannot be cast to android.app.Activity 这个错误怎么解决
05-31
解决这个错误的方法是，确保你在代码中正确地使用了 Application 和 Activity 类。 你可以尝试以下两种方法来解决这个问题： 1. 检查你的代码，确保你没有将继承自 Application 的类强制转换为 Activity 类的实例...
对下面代码进行结果分析import numpy as np from sklearn.cluster import MiniBatchKMeans from sklearn.datasets import load_iris from sklearn import preprocessing import matplotlib.pyplot as plt np.random.seed(5) from sklearn.cluster import KMeans from sklearn.metrics import silhouette_score from pylab import mpl # 设置显示中文字体 mpl.rcParams["font.sans-serif"] = ["SimHei"] # 设置正常显示符号 mpl.rcParams["axes.unicode_minus"] = False # 加载鸢尾花数据集 iris = load_iris() X = iris.data y = iris.target #最小最大标准化 min_max_scaler = preprocessing.MinMaxScaler() X_minmax=min_max_scaler.fit_transform(X) batch_size =15 num_cluster =3 #K均值算法拟合 clf=MiniBatchKMeans(n_clusters=num_cluster,batch_size=batch_size,init="random") clf.fit(X_minmax) #拟合中心 centers = clf.cluster_centers_ #预测标签 pre_clu=clf.labels_ print(pre_clu) vmarker={0:'^',1:'s',2:'D',} mValue=[vmarker[i] for i in pre_clu] for _marker, _x, _y in zip(mValue, X_minmax[:,1],X_minmax[:,2]): plt.scatter(_x, _y,marker=_marker,c="grey") plt.scatter(centers[:,1],centers[:,2],marker="*",s=200,c='black') plt.show() # 轮廓系统法最佳k值 def sc_k(): K = range(2, 10) score = [] for k in K: kmeans = KMeans(n_clusters=k) kmeans.fit(iris.data) score.append(silhouette_score(iris.data, kmeans.labels_, metric='euclidean')) plt.plot(K, score, 'r*-') plt.xlabel('k') plt.ylabel(u'轮廓系数') plt.title(u'轮廓系数确定最佳的K值') plt.show() sc_k()
06-12
这段代码使用MiniBatchKMeans算法对鸢尾花数据集进行了聚类，并展示了聚类结果和最佳的K值。 具体分析如下： 1. 数据预处理：使用MinMaxScaler对数据进行了最小最大标准化处理，将所有特征缩放到0到1之间。 2. ...
import numpy as np from sklearn.cluster import MiniBatchKMeans from sklearn.datasets import load_iris from sklearn import preprocessing import matplotlib.pyplot as plt from pylab import mpl from sklearn.cluster import KMeans from sklearn.metrics import silhouette_score from scipy.spatial.distance import cdist # 设置显示中文字体 mpl.rcParams["font.sans-serif"] = ["SimHei"] # 设置正常显示符号 mpl.rcParams["axes.unicode_minus"] = False np.random.seed(5) iris = load_iris() X = iris.data y = iris.target min_max_scaler = preprocessing.MinMaxScaler() X_minmax = min_max_scaler.fit_transform(X) batch_size = 15 num_cluster = 3 clf = MiniBatchKMeans(n_clusters=num_cluster, batch_size=batch_size, init='random') clf.fit(X_minmax) centers = clf.cluster_centers_ pre_clu = clf.labels_ vmarker = {0: '^', 1: 's', 2: 'D', } mValue = [vmarker[i] for i in pre_clu] for _marker, _x, _y in zip(mValue, X_minmax[:, 1], X_minmax[:, 2]): plt.scatter(_x, _y, marker=_marker,c='grey') plt.scatter(centers[:, 1], centers[:, 2], marker='*',s=200,c='black') plt.show() #手肘法则最佳k值 def sse_k(): K = range(1, 10) sse_result = [] for k in K: kmeans = KMeans(n_clusters=k) kmeans.fit(iris.data) sse_result.append(sum(np.min(cdist(iris.data, kmeans.cluster_centers_, 'euclidean'), axis=1)) / iris.data.shape[0]) plt.plot(K, sse_result, 'gx-') plt.xlabel('k') plt.ylabel(u'平均畸变程度') plt.title(u'肘部法则确定最佳的K值') plt.show() # 轮廓系统法最佳k值 def sc_k(): K = range(2, 10) score = [] for k in K: kmeans = KMeans(n_clusters=k) kmeans.fit(iris.data) score.append(silhouette_score(iris.data, kmeans.labels_, metric='euclidean')) plt.plot(K, score, 'r*-') plt.xlabel('k') plt.ylabel(u'轮廓系数') plt.title(u'轮廓系数确定最佳的K值') plt.show() sse_k() sc_k()
06-12
具体来说，它使用了 MiniBatchKMeans 算法对 iris 数据进行聚类，并使用了肘部法则和轮廓系数法来确定最佳的聚类数量 k。 首先，代码将 iris 数据集导入，然后进行了归一化处理。接着，使用 MiniBatchKMeans 算法对...
七、vue项目使用高德地图自定义marker图标
qq_45684708的博客
11-26 1887
效果如图 主要代码 data() { return { marker: "", markers: [ { position: [118.791545, 31.9624], id: 1, icon: require("../assets/xc/ren.png"), }, { position: [118.798832, 31.963916],
Vue官方文档学习
Anna_Liqi的博客
03-22 3408
一、vue介绍 声明式渲染， 可以通过简单的模板语法来声明式地将数据渲染 第一个vue应用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scr
vue下用canvas实现图片标注工具，允许图片放大、缩小，允许拖拽图片
LavaStrom
03-26 6894
vue下用canvas实现图片标注工具，允许图片放大、缩小，允许拖拽图片 效果图片 概述：       之前在js版本上实现过canvas标注工具，最近又拎出来，重新用vue来实现该标注功能，希望能给刚入门的小白一个指引，让小白们能少走点弯路 实现过程中遇见的问题： canvas放置在html界面上 图片如何加载到canvas中 如何实现图片放大缩小 如何实现图片拖拽 如何实现图片框选功能 注意点：代码中需要提前引入element-ui.
vue+div.canvas图像标注功能实现
tangdou369098655的博客
09-15 8873
main.js import Vue from 'vue' import 'vueui-widgets/dist/index.css' import VueUI from 'vueui-widgets' import App from './App.vue' import router from './router' import store from './store' Vue.use(...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值