how to find corner vector from opencv.js - opencv

Question

this is part of my code
export default class Comp extends Component {
onChange = async evt => {
const { files } = evt.target
const reader = new FileReader()
reader.onload = (e) => this.refs.preview.src = e.target.result
reader.readAsDataURL(files[0])
this.refs.preview.onload = () => {
let src = cv.imread(this.refs.preview)
let dst = new cv.Mat()
cv.cvtColor(src, src, cv.COLOR_RGB2GRAY, 0)
cv.threshold(src, src, 180, 300, cv.THRESH_BINARY)
let largest_area = 0
let largest_contour_index = 0
let dst1 = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3)
let contours = new cv.MatVector()
let hierarchy = new cv.Mat()
cv.findContours(src, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE)
for (let i = 0; i < contours.size(); ++i) {
let color = new cv.Scalar(255, 0, 0)
let color2 = new cv.Scalar(0, 255, 0)
let area = cv.contourArea(contours.get(i))
if (area > largest_area) {
largest_area = area
largest_contour_index = i
cv.drawContours(dst1, contours, i, color, 5, cv.LINE_8)
}
}
cv.imshow('processed', dst1)
src.delete()
dst.delete()
dst1.delete()
}
}
render() {
return (
<div>
<form action="">
<input type="file" onChange={this.onChange} />
</form>
<div className='flex'>
<div className='flex-1'>
<img ref='preview' id='preview' style={{ width: '100%' }} />
</div>
<div className='flex-1'>
<canvas id='processed' />
<img ref='processed' style={{ width: '100%' }} />
</div>
</div>
</div>
)
}
}
the result is like
i want to get those contours data and do perspective transform, and save it to db.

Answer 1

Im assuming you are using Java. Im not very good in it, im core at C++ ,python also ok.
I`ll try to help anyway.
vector<vector<Point> > contours;
this is the prototype for contours in C++. so it means outside is the id of the contour and inside is the coordinates array.
For example, you wan to know the first contours, then you can find by
vector<Point> firstcontourcoord = contours.at(0);
Then the point inside is the point you want. So go ahead and find the largest contour id.
After that you want to transform, it needs a few more thing.
right now you should have declared target cornet point position you want it to be eg
var vv = cv.matFromArray( 4,3,cv.CV_32SC1,[
0,0,0,
0,210,0,
290,210,0,
290,0,0,
])
// sample A4 size
// 2D img coords from largest bounding countour. Example
var imageP = cv.matFromArray( 4,2,cv.CV_8S,[
292,272,
72,379,
487,530,
701,470,
])
Then you can choose to use 3D or 2D transform.
For 3D visualization/AR its
var cm = new cv.Mat(3,3,cv.CV_32FC1,new cv.Scalar())
\\plz find it. this is just a sample. find camera matrix and do unistort
var rvec
var tvec
cv.solvePnP( vv, imageP, cm, new cv.Mat(), rvec, tvec, false, cv.SOLVEPNP_P3P )
Then you have the matrix.
then apply the transform.
For but im think you might just doing those paperwork processing, which u just need 2D transformation, then it is
Mat H = Calib3d.findHomography( objMat, sceneMat, Calib3d.RANSAC, ransacReprojThreshold );
//-- Get the corners from the image_1 ( the object to be "detected" )
Mat objCorners = new Mat(4, 1, CvType.CV_32FC2), sceneCorners = new Mat();
float[] objCornersData = new float[(int) (objCorners.total() * objCorners.channels())];
objCorners.get(0, 0, objCornersData);
objCornersData[0] = 0;
objCornersData[1] = 0;
objCornersData[2] = imgObject.cols();
objCornersData[3] = 0;
objCornersData[4] = imgObject.cols();
objCornersData[5] = imgObject.rows();
objCornersData[6] = 0;
objCornersData[7] = imgObject.rows();
objCorners.put(0, 0, objCornersData);
Core.perspectiveTransform(objCorners, sceneCorners, H);
float[] sceneCornersData = new float[(int) (sceneCorners.total() * sceneCorners.channels())];
sceneCorners.get(0, 0, sceneCornersData);
DB I'm not very familiar. Im only good with older C# .net based method. Others never touch with. But once you have the image just do the push in the DB for your image. shouldn't have much issue.
Edit#
YOu can follow the link below for you implmentation
select Java version
https://docs.opencv.org/3.4/df/d0d/tutorial_find_contours.html
https://docs.opencv.org/3.4/d7/dff/tutorial_feature_homography.html
U just need to copy the code from these 2 links. and you are good to go. Java is most tedious way to go for. Personally C++ or python is a better choice to go