--- /dev/null
+document.addEventListener('DOMContentLoaded', function () {
+ drawImage('assets/input.jpg', 'input', function () {
+ detect();
+ });
+})
+
+function drawImage(url, canvas, callback) {
+ var ctx = document.getElementById(canvas).getContext('2d');
+ var img = new Image();
+ img.onload = function () {
+ ctx.drawImage(img, 0, 0);
+ callback();
+ }
+ img.src = url;
+}
+
+function detect() {
+ let src = cv.imread('input');
+ let dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3);
+ let gray = new cv.Mat();
+ cv.cvtColor(src, gray, cv.COLOR_BGR2GRAY);
+ let thr = new cv.Mat();
+ cv.threshold(gray, thr, 127, 255, 1);
+ let contours = new cv.MatVector();
+ let hierarchy = new cv.Mat();
+ cv.findContours(thr, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
+
+
+ var filterByVertices = [];
+
+ for (let i = 0; i < contours.size(); ++i) {
+ let tmp = new cv.Mat();
+ let cnt = contours.get(i);
+ // You can try more different parameters
+ cv.approxPolyDP(cnt, tmp, 1, true);
+
+ var cntSize = tmp.size().width * tmp.size().height;
+ if (cntSize < 5 || cntSize > 6) {
+ continue;
+ }
+ var area = cv.contourArea(tmp, false);
+ filterByVertices.push({area: area, size: cntSize, contour: tmp});
+ }
+
+ if (filterByVertices.length === 0) {
+ return false;
+ }
+
+ filterByVertices.sort(function (a, b) {
+ return b.area - a.area;
+ });
+ var filterByArea = filterByVertices.slice(0, 2);
+ if (filterByArea[0].area / filterByArea[1].area > 1.1) {
+ return false;
+ }
+
+ var c = filterByArea[0];
+ if (c.size === 6) {
+ let tmp = new cv.Mat();
+ cv.approxPolyDP(c.contour, tmp, 10, true);
+ c.contour = tmp;
+ }
+
+ let poly = new cv.MatVector();
+
+ poly.push_back(c.contour);
+
+ let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255),
+ Math.round(Math.random() * 255));
+ cv.drawContours(dst, poly, 0, color, 1, 8, hierarchy, 0);
+
+ var res = [];
+
+ for (let j = 0; j < c.contour.rows; j++) {
+ const vertex = {x: c.contour.data32S[j * 2], y: c.contour.data32S[j * 2 + 1]};
+ res.push(vertex);
+ }
+ console.log(res);
+ cv.imshow('output', dst);
+}
\ No newline at end of file