I'm attempting to reproduce Satya Mallick's great work from here but in JavaScript.
however on the findHomography() call I am getting an error:
Uncaught BindingError {name: "BindingError", message: "Cannot pass "[object Object],[object Object],[obje…Object],[object Object],[object Object]" as a Mat", stack: "BindingError: Cannot pass "[object Object],[object…t.onclick (http://localhost:8082/opencv#:190:194)"}message: "Cannot pass "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" as a Mat"name: "BindingError"stack: "BindingError: Cannot pass "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" as a Mat↵ at BindingError.<anonymous> (http://localhost:8082/js/opencv_4_3_0.js:30:7971681)↵ at new BindingError (eval at createNamedFunction (http://localhost:8082/js/opencv_4_3_0.js:30:7971390), <anonymous>:4:34)↵ at throwBindingError (http://localhost:8082/js/opencv_4_3_0.js:30:7976808)↵ at RegisteredPointer.nonConstNoSmartPtrRawPointerToWireType [as toWireType] (http://localhost:8082/js/opencv_4_3_0.js:30:7985609)↵ at Object.findHomography (eval at new_ (http://localhost:8082/js/opencv_4_3_0.js:30:7995155), <anonymous>:7:26)↵ at Object.proto.<computed> [as findHomography] (http://localhost:8082/js/opencv_4_3_0.js:30:7982013)↵ at Align_img2 (http://localhost:8082/opencv:1925:20)↵ at HTMLAnchorElement.onclick (http://localhost:8082/opencv#:190:194)"__proto__: Error
throwBindingError @ opencv_4_3_0.js:30
nonConstNoSmartPtrRawPointerToWireType @ opencv_4_3_0.js:30
findHomography @ VM404261:7
proto.<computed> @ opencv_4_3_0.js:30
Align_img2 @ opencv:1925
onclick @ VM406404 opencv:190
Here is the code:
function Align_img2() {
//image_A is the original image we are trying to align to
//image_B is the image we are trying to line up correctly
let image_A = cv.imread(imgElement_Baseline);
let image_B = cv.imread('imageChangeup');
let image_A_gray = new cv.Mat();
let image_B_gray = new cv.Mat();
//get size of baseline image (image A)
var image_A_width = image_A.cols;
var image_A_height = image_A.rows;
//resize image B to the baseline (image A) image
let image_A_dimensions = new cv.Size(image_A_width, image_A_height);
cv.resize(image_B, image_B, image_A_dimensions, cv.INTER_AREA);
// Convert both images to grayscale
cv.cvtColor(image_A, image_A_gray, cv.COLOR_BGRA2GRAY);
cv.cvtColor(image_B, image_B_gray, cv.COLOR_BGRA2GRAY);
// Initiate detector
var orb = new cv.ORB(1000);
var kpv_image_A = new cv.KeyPointVector();
var kpv_image_B = new cv.KeyPointVector();
var descriptors_image_A =new cv.Mat();
var descriptors_image_B =new cv.Mat();
var image_A_keypoints=new cv.Mat();
var image_B_keypoints =new cv.Mat();
mask = new cv.Mat();
orb.detectAndCompute(image_A_gray, new cv.Mat(), kpv_image_A, descriptors_image_A);
orb.detectAndCompute(image_B_gray, new cv.Mat(), kpv_image_B, descriptors_image_B);
// Debug to verify key points found
let color = new cv.Scalar(0,255,0, 255);
// find matches
let bf = new cv.BFMatcher(cv.NORM_HAMMING, true);
// Match descriptors
let matches = new cv.DMatchVector();
bf.match(descriptors_image_A, descriptors_image_B, matches);
var good_matches = new cv.DMatchVector();
for (let i = 0; i < matches.size(); i++) {
if (matches.get(i).distance < 30) {
good_matches.push_back(matches.get(i));
}
}
// Debug to verify matches found
var matches_img = new cv.Mat();
cv.drawMatches(image_A_gray, kpv_image_A, image_B_gray, kpv_image_B, good_matches, matches_img, color);
cv.imshow('imageChangeup', matches_img);
var points_A = [];
var points_B = [];
for (let i = 0; i < good_matches.size(); i++) {
points_A.push(kpv_image_A.get(good_matches.get(i).queryIdx ).pt );
points_B.push(kpv_image_B.get(good_matches.get(i).trainIdx ).pt );
}
// Calculate Homography
var h = new cv.Mat();
h = cv.findHomography(points_A, points_B, cv.FM_RANSAC); //also see interesting example: https://gist.github.com/woojoo666/de66e3d56b9e5b30258448c2e0e00be7
// Warp image to baseline_image based on homography
var dst = new cv.Mat();
cv.warpPerspective(image_B_gray, dst, h, (image_A_gray.shape[1], image_A_gray.shape[0]));
cv.imshow('imageChangeup', dst);
matches_img.delete();
matches.delete();
bf.delete();
orb.delete();
kpv_image_A.delete();
kpv_image_B.delete();
descriptors_image_A.delete();
descriptors_image_B.delete();
image_A_keypoints.delete();
image_B_keypoints.delete();
image_A_gray.delete();
image_B_gray.delete();
h.delete();
dst.delete();
};
as a reference here is what point_A looks like:
points_A
(33) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {x: 180, y: 1212.4801025390625}
1: {x: 529.9200439453125, y: 56.160003662109375}
2: {x: 180, y: 1225.4400634765625}
3:
x: 54.720001220703125
y: 482.4000244140625
__proto__: Object
4: {x: 378.4320373535156, y: 74.30400848388672}
5: {x: 55.29600524902344, y: 482.112060546875}
6: {x: 89.85601043701172, y: 468.2880554199219}
7: {x: 96.76800537109375, y: 480.384033203125}
8: {x: 525.3120727539062, y: 72.57600402832031}
9: {x: 179.71202087402344, y: 1223.424072265625}