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

最新推荐文章于 2023-11-08 11:14:24 发布

十幺卜入

最新推荐文章于 2023-11-08 11:14:24 发布

阅读量1.1k

点赞数 1

分类专栏： Web 文章标签： WebAR识别图制作 WebAR图标编辑器 WebAR离线编译 WebAR源码 WebXR

本文链接：https://blog.csdn.net/qq_33789001/article/details/129405423

版权

Web 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前言

之前制作了基于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

十幺卜入

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
MindAR的网页端WebAR图片识别功能的图片目标编译器中文离线版本功能（含源码）

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

扫一扫