使用Fabricejs将图像添加到带有顶部边框的画布

Question

我正在尝试生成该图像，并且必须在同一个画布上上传多个图像（进行图像集合）。

这是我的上传代码

document.getElementById('gifToolImageUpload').onchange = function handleImage(e) {
    var reader = new FileReader();
      reader.onload = function (event){
        var imgObj = new Image();
        imgObj.src = event.target.result;
        imgObj.onload = function () {
          var image = new fabric.Image(imgObj);


          image.set({
                angle: 0,
                padding: 10,
                cornersize:10,
                height:110,
                width:110,
                stroke: '#fff', 
                strokeWidth: 10,
          });


          canvas.centerObject(image);
          canvas.add(image);
          canvas.renderAll();
        }
      }
    reader.readAsDataURL(e.target.files[0]);
}

但它只能在所有四个角落（左，右，顶部，按钮）获得边框。我想只在图像上方设置边框。

我搜索过并找到了这个Fill rectangle with stretched image with Fabricjs，但它限制了我只是一个小区域，每个画布只有一个图像。

对不起打字错误。