title: OpenCV: Get the vertices of card
body: <p>I am trying to detect a card and do warpperspective on the image. I have successfully get the contour of the card. But I am facing difficulties on how to get the vertices point (show as blue point in image) as the input of getPerspectiveTransform function. Actually I have done it with simple algorithm on a static image. However, it does not work well for live frame especially when the card rotate. Is there any simple yet robust method that can get the four vertices point of card regardless of the orientation of card?</p>
  
  <pre><code>MatOfPoint2f curve = new MatOfPoint2f(matched.toArray());
  double perimeter = Imgproc.arcLength(curve, true);
  MatOfPoint2f approxCurve2f = new MatOfPoint2f();
  Imgproc.approxPolyDP(curve, approxCurve2f, 0.003 * perimeter, true);
  
  Mat temp = new Mat(src.rows(),src.cols(),CvType.CV_8UC1);
  Imgproc.drawContours(temp, cnt, -1, new Scalar(255,255,255));
  Moments moment = Imgproc.moments(matched);
  Point centroid = new Point(moment.m10/moment.m00, moment.m01/moment.m00);
  
  MatOfPoint approxCurve = new MatOfPoint();
  approxCurve2f.convertTo(approxCurve, CvType.CV_32S);
  List&lt;Point&gt; corners = Util.toPointList(approxCurve);
  //group points that near each other
  List&lt;List&lt;Point&gt;&gt; grouping = Util.cornerPointGrouping(corners, 50);
  if(grouping.size()!=4)
  {
      return temp;
  }
  
  Mat before = new Mat(1,4, CvType.CV_32FC2);
  Mat after = new Mat(1,4, CvType.CV_32FC2);
  Util.generateTransformationParams(grouping, centroid, before, after);
  Mat transformMat = Imgproc.getPerspectiveTransform(before, after);
  Mat out = new Mat();
  Size dsize = new Size(src.width(), src.height());
  Imgproc.warpPerspective(src, out, transformMat, dsize);
  
  
  public static void generateTransformationParams(List&lt;List&lt;Point&gt;&gt; grouping, 
          Point centroid, Mat before, Mat after)
  {
  
      Point topLeft=new Point(), topRight=new Point(), 
              btmLeft=new Point(), btmRight=new Point();
      for(List&lt;Point&gt; list: grouping)
      {
          List&lt;Point&gt; ySorted = new ArrayList&lt;&gt;(list);
          Collections.sort(list, new xComparator());
          Collections.sort(ySorted, new yComparator());
          if(list.get(0).y&lt;centroid.y) //top
          {
              if(list.get(0).x&lt;centroid.x) //left
              {
                  topLeft = new Point(list.get(0).x,ySorted.get(0).y);
              }
              else //right
              {
                  topRight = new Point(list.get(list.size()-1).x,ySorted.get(0).y);
              }
          }
          else //bottom
          {
              if(list.get(0).x&lt;centroid.x) //left
              {
                  btmLeft = new Point(list.get(0).x,ySorted.get(list.size()-1).y);
              }
              else //right
              {
                  btmRight = new Point(list.get(list.size()-1).x,ySorted.get(list.size()-1).y);
              }
          }
  
      }
      //btmLeft as reference
      before.put(0, 0, topLeft.x, topLeft.y, topRight.x, topRight.y,
              btmRight.x, btmRight.y, btmLeft.x, btmLeft.y);
      double width = Util.getLength(btmLeft, btmRight);
      double height = width/creditCardRatio;
      after.put(0, 0, btmLeft.x, btmLeft.y-height, btmLeft.x+width, btmLeft.y-height,
              btmLeft.x+width, btmLeft.y, btmLeft.x, btmLeft.y);
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/u4Ck4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u4Ck4.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/kb3Tq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kb3Tq.png" alt="enter image description here"></a></p>
  
  <p>I tried minAreaRect and it works well when the card is rectangle. When the perspective change, it fails to give me the accurate vertices.
  <a href="https://i.stack.imgur.com/PEGA7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PEGA7.png" alt="enter image description here"></a></p>