CODEWITHSUNDEEP
javascriptopencvtransformation
scottsuhy
scottsuhy

Reputation: 405

I need guidance on how to convert the creation of a matrix via python/numpy to javascript

I need to align 2 images with opencv.js

I'm attempting to find a way around the problem found here. So I am trying this approach.

I'm having issues trying to recreate (and calculate) the python numpy transformation matrix in javascript.

Here is the python:


image_baseline_keypoints = np.float32([kpv_image_baseline[m.queryIdx].pt for m in matches[:number_of_matches]]).reshape(-1, 1, 2);
image_keypoints = n.float32([kpv_image[m.trainIdx].pt for m in matches[:number_of_matches]]).reshape(-1, 1, 2);

(note: the article [linked above][2] has another way of creating the matrix via numpy as well. )

what is the appropriate approach to doing the same thing in javascript? is it to use numjs (attempting it next but if possible i don't want to bring in another library)?

here is the overall JS code:


    function Align_img2() {

        let image_baseline = cv.imread(imgElement_Baseline);
        let image = cv.imread('imageChangeup');

        let image_baseline_gray = new cv.Mat();
        let image_gray = new cv.Mat();

        //get size of baseline image
        var image_baseline_width = image_baseline.cols;
        var image_baseline_height = image_baseline.rows;

        //resize image to baseline image
        let image_baseline_dimensions = new cv.Size(image_baseline_width, image_baseline_height);
        cv.resize(image, image, image_baseline_dimensions, cv.INTER_AREA);

        // Convert images to grayscale
        cv.cvtColor(image_baseline, image_baseline_gray, cv.COLOR_BGR2GRAY);
        cv.cvtColor(image, image_gray, cv.COLOR_BGR2GRAY);

        // Initiate detector
        var orb = new cv.ORB(10000);
        var kpv_image_baseline = new cv.KeyPointVector();
        var kpv_image = new cv.KeyPointVector();
        var descriptors_image_baseline =new cv.Mat();
        var descriptors_image =new cv.Mat();
        var image_baseline_keypoints=new cv.Mat();
        var image_keypoints =new cv.Mat();

        // find the keypoints with ORB
        orb.detect(image_baseline_gray, kpv_image_baseline);
        orb.detect(image_gray, kpv_image);

        // compute the descriptors with ORB
        orb.compute(image_baseline_gray, kpv_image_baseline, descriptors_image_baseline);
        orb.compute(image_gray, kpv_image, descriptors_image);

        // Debug to verify key points found
        //let color = new cv.Scalar(0,255,0, 255);
        //cv.drawKeypoints(image_baseline_gray, kpv_image_baseline, image_baseline_keypoints, color);
        //cv.drawKeypoints(image_gray, kpv_image, image_keypoints, color);
        //console.log(image_baseline_keypoints);
        //console.log(image_keypoints);

        // find matches
        let bf = new cv.BFMatcher(cv.NORM_HAMMING, 1);
        // Match descriptors
        let matches = new cv.DMatchVector();
        bf.match(descriptors_image_baseline, descriptors_image, matches);

        // Debug to verify matches found
        //var matches_img = new cv.Mat();
        //cv.drawMatches(image_baseline_gray, kpv_image_baseline, image_gray, kpv_image, matches, matches_img, color);
        //console.log(matches_img);

        // calculate transformation matrix
        number_of_matches = 10;
        /* 
        image_baseline_keypoints = np.float32([kpv_image_baseline[m.queryIdx].pt for m in matches[:number_of_matches]]).reshape(-1, 1, 2);
        image_keypoints = np.float32([kpv_image[m.trainIdx].pt for m in matches[:number_of_matches]]).reshape(-1, 1, 2);
        */

        //note: np => nj in numjs
        image_baseline_keypoints = nj.float32([kpv_image_baseline[m.queryIdx].pt for (m in matches)]).reshape(-1, 1, 2);
        image_keypoints = nj.float32([kpv_image[m.trainIdx].pt for (m in matches)]).reshape(-1, 1, 2);

        // Calculate Homography
        var h = new cv.Mat();
        h = cv.findHomography(image_baseline_keypoints, image_keypoints);

        // Warp image to baseline_image based on homography
        var dst = new cv.Mat();
        cv.warpPerspective(image_gray, dst, h, (image_baseline_gray.shape[1], image_baseline_gray.shape[0]));
        cv.imshow('imageChangeup', dst);

        matches_img.delete();
        matches.delete();
        bf.delete();
        orb.delete();
        kpv_image_baseline.delete();
        kpv_image.delete();
        descriptors_image_baseline.delete();
        descriptors_image.delete();
        image_baseline_keypoints.delete();
        image_keypoints.delete();
        image_baseline_gray.delete();
        image_gray.delete();
        h.delete();
        dst.delete();
    };

Upvotes: 1

Views: 883

Answers (1)

HAMED
HAMED

Reputation: 353

Unfortunately , opencvjs doc is AWFUL ! actually there is nothing to be named as doc ! cv.findHomography method has 3 arguments . where two first ones must be matArray . you must convert your pointA and pointB to matArray by calling : cv.matFromArray(number_of_cols_pointsA,2,cv.CV_32F,pointsA) and here , "2" is array dimention . and CV_32F referes to float32 type mat . and for the third argument of findHomography you can use cv.RANSAC

Upvotes: 2

Related Questions