I am working on a project where it requires to get the perspective image transformation as follows:

As you can see, the image extracted doesn't get me the exact one as it should reflect the image transformation with the blue borders. Though I tried to follow this tutorial - Image Perspective Correction and it seems working for the given sample image in it and for different image, it gets me the above output shown.

I don't have much knowledge in image processing but I was trying to figure few things from the code snippets, specifically perspective.js file:

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

I am not sure but the method cv.getPerspectiveTransform() with two parameters and having a parameter pointsArray in cv.matFromArray() seems the calculation done bit wrong here as the output image gets different angle.

let pointsArray = []

const scaleFactor = parseInt(imageWidth / svgCropWidth)

pointsArray = pointsArray.map( e => {
    const num = parseInt((parseInt(e) + 40) / scaleFactor)
    return num
})

Is there any way I can fix it to show exact extracted area using blue borders for output image?