将矩形图像弯曲成点周围的方形图像[Javascript]

Question

我有一张360度全景照片，我想将其转换成立方体贴图。 为了得到顶面和底面，我从照片的前25％和照片底部的25％裁剪出大的矩形。下图显示了360度全景照片的底部25％。

我希望将其转换为像这样

的

使用HTML5和Javascript。

第一张图片是使用此代码从更大的图片裁剪的

 imagePieces = [];
numColsToCut = 1;
var numRowsToCut = 1;
var widthOfOnePiece = image.width;
var heightOfOnePiece = image.height / 4;
var startHeight = 0;
        var canvas = document.createElement('canvas');
        canvas.width = widthOfOnePiece;
        canvas.height = heightOfOnePiece;
        var context = canvas.getContext('2d');
        console.log(image.height / 2);
        context.drawImage(image, 0, startHeight, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
        imagePieces.push(canvas.toDataURL());
        document.getElementById('myImageElementInTheDom6').src = imagePieces[0];

在将裁剪后的图像放入DOM元素之前，我想将其“扭曲”到底部图像中。有小费吗？ ：）