Estoy trabajando en un proyecto en el que se requiere obtener la transformación de la imagen en perspectiva de la siguiente manera:

Como puede ver, la imagen extraída no me da la imagen exacta, ya que debería reflejar la transformación de la imagen con los bordes azules. Aunque traté de seguir este tutorial - Corrección de perspectiva de imagen y parece funcionar para la imagen de muestra dada en él y para una imagen diferente, me da el resultado anterior que se muestra.

No tengo mucho conocimiento en el procesamiento de imágenes, pero estaba tratando de descifrar algunas cosas de los fragmentos de código, específicamente el archivo de perspectiva.js:

 let dst = new cv.Mat(); let dsize = new cv.Size(imageHeight, imageWidth); let srcTri = cv.matFromArray(4, 1, cv.CV_32FC2, pointsArray); let dstTri = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, imageHeight, 0, imageHeight, imageWidth, 0, imageWidth]); let M = cv.getPerspectiveTransform(srcTri, dstTri); //Believe, this is the main method for perspective transformation cv.warpPerspective(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar()); document.getElementById('imageInit').style.display = "none" cv.imshow('imageResult', dst);

No estoy seguro, pero el método cv.getPerspectiveTransform() con dos parámetros y que tiene un parámetro pointsArray en cv.matFromArray() parece que el cálculo se hizo un poco mal aquí, ya que la imagen de salida tiene un ángulo diferente.

 let pointsArray = [] const scaleFactor = parseInt(imageWidth / svgCropWidth) pointsArray = pointsArray.map( e => { const num = parseInt((parseInt(e) + 40) / scaleFactor) return num })

¿Hay alguna forma de arreglarlo para mostrar el área extraída exacta usando bordes azules para la imagen de salida?