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

共8个文件

js：6个

html：1个

css：1个

版权申诉

5星 · 超过95%的资源 120 浏览量 2023-03-07 17:59:00 上传评论 1 收藏 4.86MB 7Z 举报

资源推荐

资源详情

资源评论

收起资源包目录

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

<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>

评论收藏

内容反馈

版权申诉