在全景图中找到匹配的点/角后合并两个或更多图像？

Question

I want to merge or stitch 8 images to a single (panorama-like) canvas.

So the first step I try to find the matching point or same corner this is my progress so far :

https://lh3.googleusercontent.com/-Gyb5Dd162OA/VWCb-YH8-LI/AAAAAAAAAAg/Zla6DoEqN8w/w440-h150-p/Capture.PNG

var imageData1;
var imageData2;
var img1Data;
var canvasOffset = [0, 0];
var context;
var context2;
var width;
var height; 
var dummy = new Image();
window.onload = function() {
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
var construcktH = [];

var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');

width = image1.width;
height = image1.height;

window.descriptorLength = 250;
window.matchesShown = 10;
window.blurRadius = 3;


var doMatch = function() {
  tracking.Brief.N = window.descriptorLength;

  context.drawImage(image1, 0, 0, width, height);
  context.drawImage(image2, width, 0, width, height);

  imageData1 = context.getImageData(0, 0, width, height);
  imageData2 = context.getImageData(width, 0, width, height);

  var gray1 = tracking.Image.grayscale(tracking.Image.blur(imageData1.data, width, height, blurRadius), width, height);
  var gray2 = tracking.Image.grayscale(tracking.Image.blur(imageData2.data, width, height, blurRadius), width, height);

  var corners1 = tracking.Fast.findCorners(gray1, width, height);
  var corners2 = tracking.Fast.findCorners(gray2, width, height);

  var descriptors1 = tracking.Brief.getDescriptors(gray1, width, corners1);
  var descriptors2 = tracking.Brief.getDescriptors(gray2, width, corners2);

  var matches = tracking.Brief.reciprocalMatch(corners1, descriptors1, corners2, descriptors2);

  matches.sort(function(a, b) {
    return b.confidence - a.confidence;
  });

  for (var i = 0; i < matchesShown; i++) {
    var color = 'rgb(0,255,0)';
    context.fillStyle = color;
    context.strokeStyle = color;
    context.fillRect(matches[i].keypoint1[0], matches[i].keypoint1[1], 4, 4);
    context.fillRect(matches[i].keypoint2[0] + width, matches[i].keypoint2[1], 4, 4);

    context.beginPath();
    context.moveTo(matches[i].keypoint1[0], matches[i].keypoint1[1]);
    context.lineTo(matches[i].keypoint2[0] + width, matches[i].keypoint2[1]);
    //console.log("matches", matches[i]);
    context.stroke();
    construcktH.push(matches[i]);  
    //construcktH.push(pairs[bestliers[i]]); 
        var x1 = matches[i].keypoint1[0];
        var y1 = matches[i].keypoint1[1];
        var x2 = matches[i].keypoint2[0] + width;
        var y2 = matches[i].keypoint2[1];
    //document.write(matches[i].keypoint1[0]);
    //document.write(matches[i].keypoint1[1]);
    //document.write(matches[i].keypoint2[0] + width);
    //document.write(matches[i].keypoint2[1]);
  }
var Hbest = Solve_SVD(construcktH);
findCorners(Hbest);
stitch(Hbest);
};

doMatch();
var gui = new dat.GUI();
gui.add(window, 'descriptorLength', 128, 512).step(32).onChange(doMatch);
gui.add(window, 'matchesShown', 1, 100).onChange(doMatch);
gui.add(window, 'blurRadius', 1.1, 5).onChange(doMatch);
}

the matching point or corner found, so now my problem is how to merge that images in JavaScript?

help me, thank you

Answer 1

From your image example, I'm assuming you want to stitch multiple images into a single, larger "panorama" style image.

After you've found the top-left corners of the desired content in each sub-image, you can easily stitch the sub-images into a completed image like this:

// given: the sub-images in imgs[]
// given: the top-left corners of desired content in each sub-image in toplefts[]
// given: the completely stitched image width & height in iw,ih
function stitch(imgs,toplefts,iw,ih){

    // resize the canvas to the completed image size
    cw=canvas.width=iw;
    ch=canvas.height=ih;    

    // draw each sub-image
    // offset each sub-image by the give top-left points
    var leftX=0;
    for(var i=0;i<imgs.length;i++){
        ctx.drawImage(imgs[i],leftX-toplefts[i].x,-toplefts[i].y);
        leftX+=cw/imgs.length;
    }

}

Here's example code and a Demo:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var imageWidth=360; var imageHeight=240; var toplefts=[]; toplefts.push({x:44.5842,y:64.7285}); toplefts.push({x:26.0743,y:45.1701}); toplefts.push({x:33.8142,y:45.55804}); var imageURLs=[]; imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/world0.png"); imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/world1.png"); imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/world2.png"); var imgs=[]; var imagesOK=0; startLoadingAllImages(imagesAreNowLoaded); // function startLoadingAllImages(callback){ for (var i=0; i<imageURLs.length; i++) { var img = new Image(); imgs.push(img); img.onload = function(){ imagesOK++; if (imagesOK>=imageURLs.length ) { callback(); } }; img.onerror=function(){alert("image load failed");} img.src = imageURLs[i]; } } // function imagesAreNowLoaded(){ stitch(imgs,toplefts,imageWidth,imageHeight); } function stitch(imgs,toplefts,iw,ih){ // resize the canvas to the completed image size cw=canvas.width=iw; ch=canvas.height=ih; // draw each sub-image // offset each sub-image by the give top-left points var leftX=0; for(var i=0;i<imgs.length;i++){ ctx.drawImage(imgs[i],leftX-toplefts[i].x,-toplefts[i].y); leftX+=cw/imgs.length; } } 

 body{ background-color: ivory; } #canvas,img{border:1px solid red;} 

 <h4>Images stitched to canvas</h4> <canvas id="canvas" width=400 height=300></canvas> <h4>Source images for stitching</h4> <img src="https://dl.dropboxusercontent.com/u/139992952/multple/world0.png"> <img src="https://dl.dropboxusercontent.com/u/139992952/multple/world1.png"> <img src="https://dl.dropboxusercontent.com/u/139992952/multple/world2.png">