Update

src/Opencv/templateMatching.js

@@ -8,32 +8,17 @@ export const findMatch = (cv) => (template, image) => {
     cv.matchTemplate(image, template, destination, cv.TM_CCORR_NORMED, mask);
     let result = cv.minMaxLoc(destination, mask);
 
-
-    //console.log(result)
-    //console.log(destination)
     let maxPoint = result.maxLoc;
     let color = new cv.Scalar(255, 0, 0, 255);
     let point = new cv.Point(maxPoint.x + template.cols, maxPoint.y + template.rows);
-    //if(maxPoint.x > 20) {
-    //cv.rectangle(image, maxPoint, point, color, 2, cv.LINE_8, 0);
-    //}
-
-
+
 
 
  const newDst = [];
  let start = 0;
  let end = destination.cols;
  let matchQuality = 0;
 
- const minPointMemory = {
-     "x": 999999999,
-     "y": 999999999
- }
- const maxPointMemory = {
-     "x": 0,
-     "y": 0
- }
  const totalPoint = destination.rows * destination.cols;
  let total = 0;
  for (let i = 0; i < destination.rows; i++) {
@@ -77,7 +62,7 @@ export const findMatch = (cv) => (template, image) => {
      end = end + destination.cols;
  }
  //console.log("total")
- let average = total/totalPoint;
+ let average = Math.round( total/totalPoint * 10,10);
  //console.log(total/totalPoint)
 
     matchQuality = average;
@@ -89,26 +74,20 @@ export const findMatch = (cv) => (template, image) => {
 
 
     let colorBlue = new cv.Scalar(200, 255, 100, 255);
-    var point1 = new cv.Point( parseInt((image.cols - template.cols) / 2,10) , parseInt((image.rows - template.rows)/2,10));
-    var point2 = new cv.Point( parseInt((image.cols - template.cols) / 2,10) + template.cols  , parseInt((image.rows - template.rows)/2,10) + template.rows);
+    var point1 = new cv.Point( Math.round( (image.cols - template.cols) / 2,10) , Math.round( (image.rows - template.rows)/2,10));
+    var point2 = new cv.Point( Math.round( (image.cols - template.cols) / 2,10) + template.cols  , Math.round( (image.rows - template.rows)/2,10) + template.rows);
     cv.rectangle(image, point1, point2, colorBlue, 12, cv.LINE_8, 0);
     let colorRed = new cv.Scalar(255, 100, 200, 255);
-    cv.putText(image, "" + matchQuality, new cv.Point(10, 30), cv.FONT_HERSHEY_SIMPLEX, 1.0, colorRed, 1, cv.LINE_AA);
+    cv.putText(image,  matchQuality.toString(), new cv.Point(10, 30), cv.FONT_HERSHEY_SIMPLEX, 1.0, colorRed, 1, cv.LINE_AA);
 
     if(maxPoint.x > 0 && maxPoint.y > 0 && Math.abs(maxPoint.x - point1.x) < 10 && Math.abs(maxPoint.y - point1.y) < 10 ) {
-        const lineSize = average < 0.1 ? 1 : parseInt(average * 10, 10);
-        //console.log("lineSize")
-        //console.log(lineSize)
-
+        const lineSize = average < 0.1 ? 1 : Math.round( average * 10, 10);
+        matchQuality = 0.1  ;
         cv.rectangle(image, maxPoint, point, color, lineSize, cv.LINE_8, 0);
     }
     else{
         matchQuality = 0;
     }
- /*} 
- else {
-     numberPoint = 0;
- }*/
  mask.delete();
  destination.delete();
  return {image, matchQuality: matchQuality};

src/Opencv/video.js

@@ -28,7 +28,7 @@ const transformFunction = async (imageCvTemplate, imageCvTemplateDescription, im
     try {
         const cv = window.cv;
         if (imgCv === null) return;
-        const imd = imageResize(cv)(imgCv, 200);
+        const imd = imageResize(cv)(imgCv, 100);
 
         const imgCvTemplateResized = imd.image;
 
@@ -187,8 +187,8 @@ export const loadVideoAsync = (cv) => (imageCvTemplate, imageCvTemplateDescripti
         let constraints = {
             audio: false,
             video: {
-                width: { ideal: 1600 },
-                height: { ideal: 1600 },
+                width: { ideal: 2000 },
+                height: { ideal: 2000 },
                 facingMode: {
                     //ideal: 'face'
                     ideal: 'environment'
@@ -209,7 +209,7 @@ export const loadVideoAsync = (cv) => (imageCvTemplate, imageCvTemplateDescripti
         iDiv.appendChild(iButton);
 
         const outputCanvas = document.createElement("canvas");
-        outputCanvas.style = 'display: inline;width: 100%;';
+        outputCanvas.style = 'display: inline;width: 600px;';
         iDiv.appendChild(outputCanvas);
 
         const iVideo = document.createElement('video');

src/TemplateVideo.stories.jsx

@@ -42,7 +42,7 @@ export const TemplateVideo= () => {
         const cv = window.cv;
         const convertedFile = await toBase64Async(file);
         const imgCvTemplate = await loadImageAsync(cv)(convertedFile);
-        let imgCvTemplateResized = imageResize(cv)(imgCvTemplate, 100).image;
+        let imgCvTemplateResized = imageResize(cv)(imgCvTemplate, 50).image;
         let imgCvTemplateResizedMatch = imageResize(cv)(imgCvTemplate, 800).image;
         //let imgCvGray = convertImgToGray(cv)(imgCvTemplateResized);
         const resizedImg = detectAndComputeSerializable(cv)(imgCvTemplateResizedMatch);