当前位置: 首页 > news >正文

MindAR的网页端WebAR图片识别功能的图片目标编译器中文离线版本功能(含源码)

前言

之前制作了基于MindAR实现的网页端WebAR图片识别叠加动作模型追踪功能的demo,使用了在线的图像目标编译器对识别图进行了编译,并实现了自制的WebAR效果,大致效果如下:
在这里插入图片描述

但是在线的编译器在操作中也不是很方便,我想个人部署一个本地的图像目标编译器,这样自己使用起来还是比较的方便快捷,而且该项目的源码中也提供了相应的例子,我在这个案例基础上进行了汉化和修改,即可得到本地版本的图像目标编译器。同时该网页提供了单目标图生成、多目标图生成、生成进度展示、删除识别图和下载识别图等功能。

环境安装

需要node.js环境,下载代码仓库和执行构建等操作,这些个的步骤在前言中提到的博客中已经有介绍,这里就不重复的介绍了。

编码&汉化

这里在代码仓库的mind-ar-js-master\examples\image-tracking\compile.html的基础上进行了修改,主要对其介绍文字进行了汉化:

  <body><div><p>使用方法:</p><ol><li>将目标图像(例如.png)放入放置区域(可放置多个(多图追踪))。</li><li>单击“开始生成”,可能需要等待一段时间(特别是对于大图片可能会更久)。</li><li>完成后,会显示一些生成图片,您可以预览带特征点的识别图。</li><li>点击“下载文件”获取图片检测的mind文件,这可以用于WebAR的开发。</li></ol></div><button id="startButton">开始生成</button><button id="downloadButton">下载文件</button><span id="progress"></span><div id="dropzone" class="dropzone"></div><div id="container"></div></body>

同时,这个网页还使用了dropzone插件,将托管在云上的dropzone.min.js 和 dropzone.min.css 下载放置本地即可(别忘了修改相对位置)。

功能展示

汉化后的使用说明:
使用方法:
1.将目标图像(例如.png)放入放置区域(可放置多个(多图追踪))。
2.单击“开始生成”,可能需要等待一段时间(特别是对于大图片可能会更久)。
3.完成后,会显示一些生成图片,您可以预览带特征点的识别图。
4.点击“下载文件”获取图片检测的mind文件,这可以用于WebAR的开发。

单目标图生成:
在这里插入图片描述

多目标图生成:
在这里插入图片描述

删除识别图:
在这里插入图片描述

下载识别图:

在这里插入图片描述

源码

https://download.csdn.net/download/qq_33789001/87542299

http://www.lryc.cn/news/34433.html

相关文章:

  • 测试经理:“你做了三年测试,连服务端的接口测试都不会?”
  • 4G AFR到5G应用场景介绍
  • 正电源子 IMX6ULL 自学笔记(驱动开发)
  • AM5728(AM5708)开发实战之移植OpenCV-3.4.11
  • Notepad++ 下载与安装教程
  • 005+limou+HTML——(5)HTML图片和HTML超链接
  • ES6 Generator
  • SCI期刊写作必备(二):代码|手把手绘制目标检测领域YOLO论文常见的性能对比折线图,一键生成YOLOv7等主流论文同款图表,包含多种不同功能风格对比图表
  • linux cpu飙高排查
  • 2023实习面试公司【二】
  • C++ thread_local 存储类
  • 冥想第七百二十三天
  • zookeeper 集群配置
  • 怎么用消息队列实现分布式事务?
  • 什么蓝牙耳机佩戴舒适?2023长时间佩戴最舒适的蓝牙耳机
  • 刮刮乐--课后程序(Python程序开发案例教程-黑马程序员编著-第4章-课后作业)
  • LeetCode 全题解笔记:两数相加(02)
  • 网络工程师面试题(面试必看)(1)
  • MySQL基础操作指南:第一篇
  • C#中包含?的运算符使用汇总
  • 剑指 Offer 56 - I. 数组中数字出现的次数
  • MySQL事务日志
  • 极速开发,无限可能,2023网易低代码大赛全新赛季启动
  • C++ | 详细介绍缺省参数的作用
  • 【sdx62】sdx62分析代码中Serial Number的寄存器地址及获取Serial Number的方法
  • MATLAB的快速入门
  • Python中赋值、引用、深浅拷贝的区别和联系
  • 春招冲刺(十一):前端面试之网络总结
  • Mybatis插件
  • 计算机学科专业基础综合科目(408)