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

猜你喜欢

转载自blog.csdn.net/qq_33789001/article/details/129405423
今日推荐