javascript - How can I get Coordinates of Points of Contour corners in OpenCV.js? - Stack Overflow

admin管理员组

文章数量:1295860

I'm using OpenCV.js with JavaScript and trying to get points of an approxPolyDP return. Here is my code:

let src = cv.imread(imgElement);
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
let poly = new cv.MatVector();

cv.findContours(src, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);

let cnt = contours.get(0);

cv.approxPolyDP(cnt, poly, 0.02 * peri, true);

That draws perfect with drawContours() function. But I want to get the coordinates of points of the corners. It's simple to get it on Python, but not JavaScript.

How can I get the points' coordinates of corners?

I'm using OpenCV.js with JavaScript and trying to get points of an approxPolyDP return. Here is my code:

let src = cv.imread(imgElement);
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
let poly = new cv.MatVector();

cv.findContours(src, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);

let cnt = contours.get(0);

cv.approxPolyDP(cnt, poly, 0.02 * peri, true);

That draws perfect with drawContours() function. But I want to get the coordinates of points of the corners. It's simple to get it on Python, but not JavaScript.

How can I get the points' coordinates of corners?

• javascript
• opencv
• contour

Share Follow asked Dec 14, 2019 at 10:08 sundowatchsundowatch 3,10344 gold badges4747 silver badges7373 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

By direct access using data32S property.

function onOpenCvReady() {
  cv['onRuntimeInitialized']= async ()=>{
    await loadSomeImage()
    const mat = cv.imread(document.querySelector('#imageSrc'))
    const canvasOutput = document.querySelector('#canvasOutput')
    canvasOutput.width = mat.size().width
    canvasOutput.height = mat.size().height
    cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0)
    var contours = new cv.MatVector()
    const hierarchy = new cv.Mat
    cv.findContours(mat, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE)

    const points = {}
    for (let i = 0; i < contours.size(); ++i) {
      const ci = contours.get(i)
      points[i] = []
      for (let j = 0; j < ci.data32S.length; j += 2){
        let p = {}
        p.x = ci.data32S[j]
        p.y = ci.data32S[j+1]
        points[i].push(p)
      }
    }
    plotPoints(canvasOutput, points)
    mat.delete()
    contours.delete()
    hierarchy.delete()
  };
}

async function loadSomeImage() {
  const ctx = document.querySelector('#imageSrc').getContext('2d')
  ctx.fillStyle = 'black'
  ctx.fillRect(0,0,279,290)
  ctx.strokeStyle = 'white'
  ;[[58,73,96,46,123,114,57,108],[154,92,153,25,263,111],[25,268,32,138,233,131,232,280]].forEach(([x,y,...p]) => {
    ctx.beginPath();ctx.moveTo(x,y);
    for(let i = 0; i < p.length; i+= 2){ ctx.lineTo(p[i], p[i+1]) }
    ctx.lineTo(x,y)
    ctx.closePath()
    ctx.stroke()
  })
}
function plotPoints(canvas, points){
  const ctx = canvas.getContext('2d')
  ctx.strokeStyle = 'green'

  Object.values(points).forEach(ps => {
    ctx.beginPath()
    ctx.moveTo(ps[0].x, ps[1].y)
    ctx.arc(ps[0].x, ps[1].y, 2, 0, 2 * Math.PI)
    ps.slice(1).forEach(({x,y})=>{
      ctx.lineTo(x,y)
      ctx.arc(x, y, 2, 0, 2 * Math.PI)
    })
    ctx.closePath()
    ctx.stroke()
  })
}

<script async onload="onOpenCvReady()" src="https://docs.opencv/master/opencv.js"></script>

<canvas id="imageSrc" height="290" width="279" title="base"/></canvas>
<canvas id="canvasOutput" style="background:#eeeeee;" title="drawing from points"></canvas>

At this point, I found this solution: https://www.reddit./r/putervision/ments/8ko2if/questionopencvjs_get_xy_locations_from_a_contour/

本文标签： javascriptHow can I get Coordinates of Points of Contour corners in OpenCVjsStack Overflow