Javascript 在找到匹配点/角点后，是否将两个或多个图像合并到全景图中？

我想合并或缝合8个图像到一个单一的（全景式）画布

因此，我尝试找到匹配点或同一个角点的第一步是我迄今为止的进展：

var-imageData1；
var imageData2；
var-img1数据；
var-canvasOffset=[0,0]；
var语境；
var-context2；
var宽度；
变异高度；
var dummy=新图像（）；
window.onload=函数（）{
var canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
var construcktH=[]；
var image1=document.getElementById（'image1'）；
var image2=document.getElementById（'image2'）；
宽度=图像1.5倍宽度；
高度=1.5米高度；
window.descriptorLength=250；
window.matchesShown=10；
视窗半径=3；
var doMatch=function（）{
tracking.Brief.N=window.descriptor长度；
drawImage（图像1、0、0、宽度、高度）；
drawImage（图像2，宽度，0，宽度，高度）；
imageData1=context.getImageData（0，0，宽度，高度）；
imageData2=context.getImageData（宽度，0，宽度，高度）；
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=跟踪.Fast.findCorners（灰色1，宽度，高度）；
var corners2=跟踪.Fast.findCorners（灰色2，宽度，高度）；
var descriptors1=tracking.Brief.getDescriptors（灰色1，宽度，拐角1）；
var descriptors2=tracking.Brief.getDescriptors（灰色2，宽度，拐角2）；
var匹配=跟踪。简要。往复匹配（拐角1，描述符1，拐角2，描述符2）；
matches.sort（函数（a，b）{
返回b.信心-a.信心；
});
对于（变量i=0；i

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

---

帮帮我，谢谢

从您的图像示例中，我假设您希望将多个图像缝合到一个较大的“全景”样式图像中

在每个子图像中找到所需内容的左上角后，您可以轻松地将子图像缝合成完整的图像，如下所示：

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

}

缝合到画布的图像
用于缝合的源图像

可能的答案太多，或者好的答案对于这种格式来说太长。请添加详细信息以缩小答案集或隔离可以在几段中回答的问题。我已经在我的帖子sir@honkSorry中包含了我的进度图像链接和代码，我想再次提问。我想根据之前找到的比赛角点更改x和y坐标，先生，我可以知道怎么做吗？谢谢你我不清楚你在问什么。剪裁图像的[x，y]在我的回答中的

drawImage

方法中定义：

x=LastClippedImage的宽度+ExtClippedImage的宽度

和

y=ExtClippedImage的宽度

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

}