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

Question

我想将 8 张图像合并或拼接成一张（类似全景图）canvas。

所以我尝试找到匹配点或相同角的第一步这是我目前的进度：

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

找到匹配点或角点，所以现在我的问题是如何合并 JavaScript 中的图像？

帮帮我，谢谢

Answer 1

根据您的图片示例，我假设您想要将多张图片拼接成一张更大的 "panorama" 风格图片。

在每张子图中找到所需内容的左上角后，您可以像这样轻松地将子图像拼接成完整的图像：

// 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;
    }

}

这是示例代码和演示：

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">

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

Merge two or more images after matching point / corner found into a panorama?

html

javascript

canvas

image-processing

html5-canvas