如何在 OpenCV.js 中获取等高角点的坐标?

Question

我正在使用OpenCV.js和JavaScript，并试图获得大约PolyDP返回的分数。这是我的代码：

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);

这与drawContours()功能完美结合。但是我想得到角点的坐标。在 Python 上获取它很简单，但在 JavaScript 上却不行。

如何获取点的角坐标？

Answer 1

通过使用 data32S 属性直接访问。

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.org/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>

Answer 2

在这一点上，我找到了这个解决方案： https://www.reddit.com/r/computervision/comments/8ko2if/questionopencvjs_get_xy_locations_from_a_contour/