基于opencv.js实现二维码定位

    通过分析OpenCV.JS （官方下载地址 https://docs.opencv.org/_VERSION_/opencv.js)的白名单，我们可以了解目前官方PreBuild版本并没有实现QR识别。

# Classes and methods whitelist
core  = { '' : [ 'absdiff',  'add',  'addWeighted',  'bitwise_and',  'bitwise_not',  'bitwise_or',  'bitwise_xor',  'cartToPolar',\
              'compare',  'convertScaleAbs',  'copyMakeBorder',  'countNonZero',  'determinant',  'dft',  'divide',  'eigen', \
              'exp',  'flip',  'getOptimalDFTSize', 'gemm',  'hconcat',  'inRange',  'invert',  'kmeans',  'log',  'magnitude', \
              'max',  'mean',  'meanStdDev',  'merge',  'min',  'minMaxLoc',  'mixChannels',  'multiply',  'norm',  'normalize', \
              'perspectiveTransform',  'polarToCart',  'pow',  'randn',  'randu',  'reduce',  'repeat',  'rotate',  'setIdentity',  'setRNGSeed', \
              'solve',  'solvePoly',  'split',  'sqrt',  'subtract',  'trace',  'transform',  'transpose',  'vconcat'],
         'Algorithm' : []}

imgproc  = { '' : [ 'Canny',  'GaussianBlur',  'Laplacian',  'HoughLines',  'HoughLinesP',  'HoughCircles',  'Scharr', 'Sobel', \
                 'adaptiveThreshold', 'approxPolyDP', 'arcLength', 'bilateralFilter', 'blur', 'boundingRect', 'boxFilter',\
                 'calcBackProject', 'calcHist', 'circle', 'compareHist', 'connectedComponents', 'connectedComponentsWithStats', \
                 'contourArea',  'convexHull',  'convexityDefects',  'cornerHarris', 'cornerMinEigenVal', 'createCLAHE', \
                 'createLineSegmentDetector', 'cvtColor', 'demosaicing', 'dilate',  'distanceTransform', 'distanceTransformWithLabels', \
                 'drawContours', 'ellipse', 'ellipse2Poly', 'equalizeHist', 'erode',  'filter2D',  'findContours', 'fitEllipse', \
                 'fitLine',  'floodFill', 'getAffineTransform',  'getPerspectiveTransform',  'getRotationMatrix2D',  'getStructuringElement', \
                 'goodFeaturesToTrack', 'grabCut', 'initUndistortRectifyMap',  'integral', 'integral2',  'isContourConvex',  'line', \
                 'matchShapes',  'matchTemplate', 'medianBlur',  'minAreaRect',  'minEnclosingCircle',  'moments',  'morphologyEx', \
                 'pointPolygonTest',  'putText', 'pyrDown', 'pyrUp', 'rectangle', 'remap',  'resize', 'sepFilter2D', 'threshold', \
                 'undistort', 'warpAffine', 'warpPerspective', 'warpPolar', 'watershed', \
                 'fillPoly',  'fillConvexPoly'],
            'CLAHE' : [ 'apply',  'collectGarbage',  'getClipLimit',  'getTilesGridSize',  'setClipLimit',  'setTilesGridSize']}

objdetect  = { '' : [ 'groupRectangles'],
              'HOGDescriptor' : [ 'load',  'HOGDescriptor',  'getDefaultPeopleDetector',  'getDaimlerPeopleDetector',  'setSVMDetector',  'detectMultiScale'],
              'CascadeClassifier' : [ 'load',  'detectMultiScale2',  'CascadeClassifier',  'detectMultiScale3',  'empty',  'detectMultiScale']}

video  = { '' : [ 'CamShift',  'calcOpticalFlowFarneback',  'calcOpticalFlowPyrLK',  'createBackgroundSubtractorMOG2', \
              'findTransformECC',  'meanShift'],
          'BackgroundSubtractorMOG2' : [ 'BackgroundSubtractorMOG2',  'apply'],
          'BackgroundSubtractor' : [ 'apply',  'getBackgroundImage']}

dnn  = { 'dnn_Net' : [ 'setInput',  'forward'],
        '' : [ 'readNetFromCaffe',  'readNetFromTensorflow',  'readNetFromTorch',  'readNetFromDarknet',
             'readNetFromONNX',  'readNet',  'blobFromImage']}

features2d  = { 'Feature2D' : [ 'detect',  'compute',  'detectAndCompute',  'descriptorSize',  'descriptorType',  'defaultNorm',  'empty',  'getDefaultName'],
               'BRISK' : [ 'create',  'getDefaultName'],
               'ORB' : [ 'create',  'setMaxFeatures',  'setScaleFactor',  'setNLevels',  'setEdgeThreshold',  'setFirstLevel',  'setWTA_K',  'setScoreType',  'setPatchSize',  'getFastThreshold',  'getDefaultName'],
               'MSER' : [ 'create',  'detectRegions',  'setDelta',  'getDelta',  'setMinArea',  'getMinArea',  'setMaxArea',  'getMaxArea',  'setPass2Only',  'getPass2Only',  'getDefaultName'],
               'FastFeatureDetector' : [ 'create',  'setThreshold',  'getThreshold',  'setNonmaxSuppression',  'getNonmaxSuppression',  'setType',  'getType',  'getDefaultName'],
               'AgastFeatureDetector' : [ 'create',  'setThreshold',  'getThreshold',  'setNonmaxSuppression',  'getNonmaxSuppression',  'setType',  'getType',  'getDefaultName'],
               'GFTTDetector' : [ 'create',  'setMaxFeatures',  'getMaxFeatures',  'setQualityLevel',  'getQualityLevel',  'setMinDistance',  'getMinDistance',  'setBlockSize',  'getBlockSize',  'setHarrisDetector',  'getHarrisDetector',  'setK',  'getK',  'getDefaultName'],
               # 'SimpleBlobDetector': ['create'],
               'KAZE' : [ 'create',  'setExtended',  'getExtended',  'setUpright',  'getUpright',  'setThreshold',  'getThreshold',  'setNOctaves',  'getNOctaves',  'setNOctaveLayers',  'getNOctaveLayers',  'setDiffusivity',  'getDiffusivity',  'getDefaultName'],
               'AKAZE' : [ 'create',  'setDescriptorType',  'getDescriptorType',  'setDescriptorSize',  'getDescriptorSize',  'setDescriptorChannels',  'getDescriptorChannels',  'setThreshold',  'getThreshold',  'setNOctaves',  'getNOctaves',  'setNOctaveLayers',  'getNOctaveLayers',  'setDiffusivity',  'getDiffusivity',  'getDefaultName'],
               'DescriptorMatcher' : [ 'add',  'clear',  'empty',  'isMaskSupported',  'train',  'match',  'knnMatch',  'radiusMatch',  'clone',  'create'],
               'BFMatcher' : [ 'isMaskSupported',  'create'],
               '' : [ 'drawKeypoints',  'drawMatches',  'drawMatchesKnn']}

photo  = { '' : [ 'createAlignMTB',  'createCalibrateDebevec',  'createCalibrateRobertson', \
               'createMergeDebevec',  'createMergeMertens',  'createMergeRobertson', \
               'createTonemapDrago',  'createTonemapMantiuk',  'createTonemapReinhard',  'inpaint'],
         'CalibrateCRF' : [ 'process'],
         'AlignMTB'  : [ 'calculateShift',  'shiftMat',  'computeBitmaps',  'getMaxBits',  'setMaxBits', \
                       'getExcludeRange',  'setExcludeRange',  'getCut',  'setCut'],
         'CalibrateDebevec'  : [ 'getLambda',  'setLambda',  'getSamples',  'setSamples',  'getRandom',  'setRandom'],
         'CalibrateRobertson'  : [ 'getMaxIter',  'setMaxIter',  'getThreshold',  'setThreshold',  'getRadiance'],
         'MergeExposures'  : [ 'process'],
         'MergeDebevec'  : [ 'process'],
         'MergeMertens'  : [ 'process',  'getContrastWeight',  'setContrastWeight',  'getSaturationWeight', \
                           'setSaturationWeight',  'getExposureWeight',  'setExposureWeight'],
         'MergeRobertson'  : [ 'process'],
         'Tonemap'  : [ 'process' ,  'getGamma',  'setGamma'],
         'TonemapDrago'  : [ 'getSaturation',  'setSaturation',  'getBias',  'setBias', \
                           'getSigmaColor',  'setSigmaColor',  'getSigmaSpace', 'setSigmaSpace'],
         'TonemapMantiuk'  : [ 'getScale',  'setScale',  'getSaturation',  'setSaturation'],
         'TonemapReinhard'  : [ 'getIntensity',  'setIntensity',  'getLightAdaptation',  'setLightAdaptation', \
                              'getColorAdaptation',  'setColorAdaptation']
        }

aruco  = { '' : [ 'detectMarkers',  'drawDetectedMarkers',  'drawAxis',  'estimatePoseSingleMarkers',  'estimatePoseBoard',  'estimatePoseCharucoBoard',  'interpolateCornersCharuco',  'drawDetectedCornersCharuco'],
         'aruco_Dictionary' : [ 'get',  'drawMarker'],
         'aruco_Board' : [ 'create'],
         'aruco_GridBoard' : [ 'create',  'draw'],
         'aruco_CharucoBoard' : [ 'create',  'draw'],
        }

calib3d  = { '' : [ 'findHomography',  'calibrateCameraExtended',  'drawFrameAxes',  'estimateAffine2D',  'getDefaultNewCameraMatrix',  'initUndistortRectifyMap',  'Rodrigues']}


white_list  = makeWhiteList([core, imgproc, objdetect, video, dnn, features2d, photo, aruco, calib3d])

    但是我们仍然可以通过轮廓分析的相关方法，去实现“基于opencv.js实现二维码定位”，这就是本篇BLOG的主要内容。

一、基本原理

        主要内容请参考《OpenCV使用FindContours进行二维码定位》，这里重要的回顾一下。

         使 用过FindContours直接寻找联通区域的函数。 典型的运用在二维码上面：

    对于它的3个定位点，这种重复包含的特性，在图上只有 不容易重复的 三处，这是具有排它性的。

    那么轮廓识别的结果是如何展示的了？比如 在这幅图中（白色区域为有数据的区域，黑色为无数据),0,1,2是第一层，然后里面是3，3的里面是4和5。(2a表示是2的内部)，他们的关系应该是这样的：

所以我们只需要寻找某一个轮廓“有无爷爷轮廓”，就可以判断出来它是否“重复包含”

值得参考的C++代码应该是这样的，其中注释部分已经说明的比较清楚。

#include "opencv2/highgui/highgui.hpp"
#include "opencv2/imgproc/imgproc.hpp"
#include <iostream>
#include <stdio.h>
#include <stdlib.h>
#include <math.h>
using namespace cv;
using namespace std;
//找到所提取轮廓的中心点
//在提取的中心小正方形的边界上每隔周长个像素提取一个点的坐标，求所提取四个点的平均坐标（即为小正方形的大致中心）
Point Center_cal(vector<vector<Point> > contours,int i)
{
    int centerx=0,centery=0,n=contours[i].size();
    centerx = (contours[i][n/4].x + contours[i][n*2/4].x + contours[i][3*n/4].x + contours[i][n-1].x)/4;
    centery = (contours[i][n/4].y + contours[i][n*2/4].y + contours[i][3*n/4].y + contours[i][n-1].y)/4;
    Point point1=Point(centerx,centery);
    return point1;
}
int main( int argc, char** argv[] )
{
    Mat src = imread( "e:/sandbox/qrcode.jpg", 1 );
    resize(src,src,Size(800,600));//标准大小
    Mat src_gray;
    Mat src_all=src.clone();
    Mat threshold_output;
    vector<vector<Point> > contours,contours2;
    vector<Vec4i> hierarchy;
    //预处理
    cvtColor( src, src_gray, CV_BGR2GRAY );
    blur( src_gray, src_gray, Size(3,3) ); //模糊，去除毛刺
    threshold( src_gray, threshold_output, 100, 255, THRESH_OTSU );
    //寻找轮廓 
    //第一个参数是输入图像 2值化的
    //第二个参数是内存存储器，FindContours找到的轮廓放到内存里面。
    //第三个参数是层级，**[Next, Previous, First_Child, Parent]** 的vector
    //第四个参数是类型，采用树结构
    //第五个参数是节点拟合模式，这里是全部寻找
    findContours( threshold_output, contours, hierarchy,  CV_RETR_TREE, CHAIN_APPROX_NONE, Point(0, 0) );
    //轮廓筛选
    int c=0,ic=0,area=0;
    int parentIdx=-1;
    for( int i = 0; i< contours.size(); i++ )
    {
        //hierarchy[i][2] != -1 表示不是最外面的轮廓
        if (hierarchy[i][2] != -1 && ic==0)
        {
            parentIdx = i; 
            ic++;
        }
        else if (hierarchy[i][2] != -1)
        {
            ic++;
        }
        //最外面的清0
        else if(hierarchy[i][2] == -1)
        {
            ic = 0;
            parentIdx = -1;
        }
        //找到定位点信息
        if ( ic >= 2)
        {
            contours2.push_back(contours[parentIdx]);
            ic = 0;
            parentIdx = -1;
        }
    }
    //填充定位点
    for(int i=0; i<contours2.size(); i++)
        drawContours( src_all, contours2, i,  CV_RGB(0,255,0) , -1 );
    //连接定位点
    Point point[3];
    for(int i=0; i<contours2.size(); i++)
    {
        point[i] = Center_cal( contours2, i );
    }
    
    line(src_all,point[0],point[1],Scalar(0,0,255),2);
    line(src_all,point[1],point[2],Scalar(0,0,255),2);
    line(src_all,point[0],point[2],Scalar(0,0,255),2);
     
    imshow( "结果", src_all );
    waitKey(0);
    return(0);
}

二、算法重点

        由于 hierarchy 这块是比较缺乏文档的，在转换为JS的过程中存在一定困难，最终得到了以下的正确结果：

<! DOCTYPE  html >

< html >

< head >

< meta  charset= "utf-8" >

< title >Hello OpenCV.js </ title >

< script  async  src= "opencv.js"  onload= " onOpenCvReady(); "  type= "text/javascript" ></ script >

</ head >

< body >

< h2 >Hello OpenCV.js </ h2 >

< p  id= "status" >OpenCV.js is loading... </ p >

< div >

   < div  class= "inputoutput" >

     < img  id= "imageSrc"  alt= "No Image"  />

     < div  class= "caption" >imageSrc  < input  type= "file"  id= "fileInput"  name= "file"  /></ div >

   </ div >

   < div  class= "inputoutput" >

     < canvas  id= "canvasOutput"  ></ canvas >

     < div  class= "caption" >canvasOutput </ div >

   </ div >

   < div  class= "inputoutput2" >

     < canvas  id= "canvasOutput2"  ></ canvas >

     < div  class= "caption" >canvasOutput2 </ div >

   </ div >

</ div >

< script  type= "text/javascript" >

let imgElement = document.getElementById( 'imageSrc');

let inputElement = document.getElementById( 'fileInput');

inputElement.addEventListener( 'change', (e)  => {

  imgElement.src = URL.createObjectURL(e.target.files[ 0]);

},  false);

imgElement.onload =  function() {

let src = cv.imread(imgElement);

let src_clone = cv.imread(imgElement);

let dsize =  new cv.Size( 800,  600);

// You can try more different parameters

cv.resize(src, src, dsize);cv.resize(src_clone, src_clone, dsize);

let dst = cv.Mat.zeros(src.rows,src.cols, cv.CV_8UC3);

cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY,  0);

let ksize =  new cv.Size( 3,  3);

// You can try more different parameters 

cv.blur(src, src, ksize); 

cv.threshold(src, src,  100,  255, cv.THRESH_OTSU);

let contours =  new cv.MatVector();

let contours2 =  new cv.MatVector();

let hierarchy =  new cv.Mat();

// You can try more different parameters

cv.findContours(src, contours, hierarchy, cv.RETR_TREE, cv.CHAIN_APPROX_NONE);

//轮廓筛选

let c= 0,ic= 0,area= 0;

let parentIdx = - 1;

debugger

for(  let i =  0; i< contours.size(); i++ )

{

     //let hier = hierarchy.intPtr(0, i)

     if (hierarchy.intPtr( 0,i)[ 2] != - 1 && ic== 0)

    {

        parentIdx = i; 

        ic++;

    }

     else   if  (hierarchy.intPtr(0,i)[2] != -1)

    {

        ic++;

    }

     else  if(hierarchy.intPtr( 0,i)[ 2] == - 1)

    {

        ic =  0;

        parentIdx = - 1;

    }

     //找到定位点信息

     if ( ic >=  2)

    {

       //let cnt = matVec.get(0);

      contours2.push_back(contours.get(parentIdx));

      ic =  0;

      parentIdx = - 1;

    }

    

}

console.log(contours2.size());

//填充定位点

for( let i= 0; i<contours.size(); i++)

{

   let color =  new cv.Scalar( 255,  0,  0,  255); 

  cv.drawContours(src_clone, contours, i,color, 1);

}

cv.imshow( 'canvasOutput', src_clone);

for( let i= 0; i<contours2.size(); i++)

{

   let color =  new cv.Scalar(Math.round(Math.random() *  255), Math.round(Math.random() *  255),

                              Math.round(Math.random() *  255));

  cv.drawContours(dst, contours2, i, color,  1);

}

cv.imshow( 'canvasOutput2', dst);

src.delete(); src_clone.delete();

dst.delete(); contours.delete(); hierarchy.delete();

};

function onOpenCvReady() {

  document.getElementById( 'status').innerHTML =  'OpenCV.js is ready.';

}

</ script >

</ body >

</ html >

其中绝大多数部分都和C++相似， 不同的地方已经标红。 它能够成功运行，并且得到正确的定位。（这里OpenCVJS的相关运行情况请参考官方教程）

三、研究收获

        这次研究的关键节点， 是建立了Debug机制。在JS代码中加入debugger语句，并且开启F12，则在调试的过程中，可以查看各个变量的信息。

此外，非常重要的参考资料，就是OpenCV的官方教程。如果希望进一步进行研究的话，首先需要先收集掌握所有现有资料。

感谢阅读至此，希望有所帮助。

来自为知笔记(Wiz)