<html>
<head>
<title>图片识别 生成</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./dropzone.min.js"></script>
<link rel="stylesheet" href="./dropzone.min.css">
<script type="module">
import {Compiler} from "./libs/mindar-image.js";
Dropzone.autoDiscover = false;
//document.getElementById('mindar-module').onload=()=>{
const compiler = new window.MINDAR.IMAGE.Compiler();
const download = (buffer) => {
var blob = new Blob([buffer]);
var aLink = window.document.createElement('a');
aLink.download = 'targets.mind';
aLink.href = window.URL.createObjectURL(blob);
aLink.click();
window.URL.revokeObjectURL(aLink.href);
}
const showData = (data) => {
console.log("data", data);
for (let i = 0; i < data.trackingImageList.length; i++) {
const image = data.trackingImageList[i];
const points = data.trackingData[i].points.map((p) => {
return {x: Math.round(p.x), y: Math.round(p.y)};
});
showImage(image, points);
}
for (let i = 0; i < data.imageList.length; i++) {
const image = data.imageList[i];
const kpmPoints = [...data.matchingData[i].maximaPoints, ...data.matchingData[i].minimaPoints];
const points2 = [];
for (let j = 0; j < kpmPoints.length; j++) {
points2.push({x: Math.round(kpmPoints[j].x), y: Math.round(kpmPoints[j].y)});
}
showImage(image, points2);
}
}
const showImage = (targetImage, points) => {
const container = document.getElementById("container");
const canvas = document.createElement('canvas');
container.appendChild(canvas);
canvas.width = targetImage.width;
canvas.height = targetImage.height;
canvas.style.width = canvas.width;
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = new Uint32Array(imageData.data.buffer);
const alpha = (0xff << 24);
for (let c = 0; c < targetImage.width; c++) {
for (let r = 0; r < targetImage.height; r++) {
const pix = targetImage.data[r * targetImage.width + c];
data[r * canvas.width + c] = alpha | (pix << 16) | (pix << 8) | pix;
}
}
var pix = (0xff << 24) | (0x00 << 16) | (0xff << 8) | 0x00; // green
for (let i=0; i < points.length; ++i) {
const x = points[i].x;
const y = points[i].y;
const offset = (x + y * canvas.width);
data[offset] = pix;
//for (var size = 1; size <= 3; size++) {
for (var size = 1; size <= 6; size++) {
data[offset-size] = pix;
data[offset+size] = pix;
data[offset-size*canvas.width] = pix;
data[offset+size*canvas.width] = pix;
}
}
ctx.putImageData(imageData, 0, 0);
}
const loadImage = async (file) => {
const img = new Image();
return new Promise((resolve, reject) => {
let img = new Image()
img.onload = () => resolve(img);
img.onerror = reject;
img.src = URL.createObjectURL(file);
//img.src = src
})
}
const compileFiles = async (files) => {
const images = [];
for (let i = 0; i < files.length; i++) {
images.push(await loadImage(files[i]));
}
let _start = new Date().getTime();
const dataList = await compiler.compileImageTargets(images, (progress) => {
document.getElementById("progress").innerHTML = '生成进度: ' + progress.toFixed(2) + "%";
});
console.log('exec time compile: ', new Date().getTime() - _start);
for (let i = 0; i < dataList.length; i++) {
showData(dataList[i]);
}
const exportedBuffer = await compiler.exportData();
document.getElementById("downloadButton").addEventListener("click", function() {
download(exportedBuffer);
});
}
const loadMindFile = async (file) => {
var reader = new FileReader();
reader.onload = function() {
const dataList = compiler.importData(this.result);
for (let i = 0; i < dataList.length; i++) {
showData(dataList[i]);
}
}
reader.readAsArrayBuffer(file);
}
document.addEventListener('DOMContentLoaded', function(event) {
const myDropzone = new Dropzone("#dropzone", { url: "#", autoProcessQueue: false, addRemoveLinks: true });
myDropzone.on("addedfile", function(file) {});
document.getElementById("startButton").addEventListener("click", function() {
const files = myDropzone.files;
if (files.length === 0) return;
const ext = files[0].name.split('.').pop();
if (ext === 'mind') {
loadMindFile(files[0]);
} else {
compileFiles(files);
}
});
});
//};
</script>
<style>
#container {
display: flex;
flex-direction: column;
}
</style>
</head>
<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>
</html>
MindAROfflineImgTargetMaker.7z （8个子文件） 
OfflineImgTargetMaker libs assets 
compiler.worker.a69dc9d5.js 45KB controller.008258e8.js 5.26MB mindar-image.js 1KB controller.672e479f.js 30.35MB ui.4498bf0c.js 17KB dropzone.min.js 46KB
compile.html 6KB dropzone.min.css 9KB
十幺卜入
- 粉丝: 1w+
- 资源: 60
最新资源
- 利用黑科技工具，几十秒生成一条必过原创精品视频，零基础适合.mp4
- TE分类 公众号描述： 搬运论文内容，如有错误，敬请指正
- 计组课设-Quartus操作笔记.7z
- 基于分布式驱动电动汽车的车辆状态估计，采用的是无迹卡尔曼（ukf）观测器，可估计包括纵向速度，质心侧偏角，横摆角速度，以及四个车轮角速度七个状态 模型中第一个模块是四轮驱动电机；第二个模块是cars
- GDX1 MICROII外部主机和辅机接线图
- 免费无限制，AI一键生成小红书原创视频，商单+带货，单账号日收益1000+.mp4
- 汽水音乐人计划单号月入5000+可放大.mp4
- 评论区私信暴力引流法，每天精准引流300+创业粉，全平台已打通，简单粗暴.mp4
- 实体商家必学：同城到店团购策略：抖音外卖与工厂自卖运营技巧.mp4
- SSA-CNN-GRU麻雀算法优化卷积门控循环单元时间序列预测（Matlab） 所有程序经过验证，保证有效运行 可有偿替数据及其他服务 2.输入数据为单变量时间序列数据，即一维数据； 3.运行环境
- 中颖无刷 BLDC 方案 芯片： Sh79f1611 Sh79f2202A 电压平台： 18V 36V； 状态： 量产阶段； 功能点： ADC方案，堵转失步，转速环电流环，电压电流保护等； 适配： 枪
- 淘宝无人直播最新玩法，不违规不封号，轻松月入3W+.mp4
- C# OPC DA 协议同步及异步读取数据，支持局域网访问其他OPC server
- 不同品种桃子叶片图像分类数据集【已标注，约2500张数据】
- Notepad++文本编辑器(64位) v8.6.4
- 头条搬运知乎文章教程：从注册到发布，全流程详解.mp4
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
前往页