使用 Javascript 在纸上进行标记检测 sheet

Question

目前我正在寻找一种使用Javascript检测相纸sheet上标记位置的简单方法。到目前为止，我所发现的只是一些库，就我的目的而言，这些库有点过头了。

例如awe.js使用AR技术来检测实时视频上的标记。但是，我所需要的只是图片上的标记检测，如下面上传的示例文件所示。（请注意，标记只是虚拟标记。我将为每个角使用单独的标记）

Paper sheet with 4 dummy markers

我试过的库：

awe.js

js-aruco

OpenCV：不适用于 Javascript

tracking.js: https://trackingjs.com/examples/brief.html（无效很好）

有人知道解决我的问题的简单方法吗？

Answer 1

感谢所有试图为我的问题找到解决方案的人。毕竟，我设法用 js-aruco 检测了我论文 sheet 的标记：

https://github.com/jcmellado/js-aruco/tree/master/samples/getusermedia

js-aruco 制作实时视频的快照，在 canvas 中呈现每个快照并检测标记。我调整了“getusermedia.html”，这样它就不会从视频中截取快照，而是在 canvas 中只渲染一次图像。检测器能够找到此页面上列出的每个标记：

http://diogok.net/js-aruco-markers/index.html

最后，我不得不重写 aruco.js 的函数，以便它找到小于纸张 20%（这是默认值）的标记。

AR.Detector.prototype.detect = function(image) {
  CV.grayscale(image, this.grey);
  CV.adaptiveThreshold(this.grey, this.thres, 2, 3);
  this.contours = CV.findContours(this.thres, this.binary);
  this.candidates = this.findCandidates(this.contours, image.width * 0.01, 0.05, 10);
  this.candidates = this.clockwiseCorners(this.candidates);
  this.candidates = this.notTooNear(this.candidates, 10);
  return this.findMarkers(this.grey, this.candidates, 49);
};

这样，js-aruco 就可以在我的纸角上找到小标记 sheet。

Answer 2

如果您的图像中有自定义标记或必须在服务器端执行标记检测，您可以使用 js-aruco2 库。在这里，您不必被迫使用 ArUco 标记（由于最小汉明距离为 1，因此不太可靠），但可以使用更高级的 ARUCO_MIP_36h12（也由 ArUco 团队在其 C++ 库中提供，并带有汉明距离12 个），或者您可以通过以下方式创建自己的标记列表：

AR.DICTIONARIES.MyDictionary = {
  nBits: 25, //bit dimension of the markers in your dictionary
  tau: 1,    //optional hamming distance of the codes in your dictionary
  codeList: ['0x1084210UL', '0x1084217UL', ...] //hexadecimal representation of every marker in your dictionary, where the array order represent the marker id
};

使用 Javascript 在纸上进行标记检测 sheet

Marker detection on paper sheet using Javascript

javascript

canvas

detection

marker