文件输入结构js添加图像

我有一个画布，上面有 2 张图像，一个没有事件，其他我们可以更改。现在我正在尝试使用文件输入更改/替换图像，一切都很好，只是在更改图像时它会替换我想要的图像，但也会在顶部添加一个。我想用id='changeimg'

//Add Image to Canvas
var imgObj = new Image();
//imgObj.id='changeimg';
imgObj.src = "blank.png";
var imgmain = imgObj.onload = function() {
  var image = new fabric.Image(imgObj);
  image.set({
    id: 'changeimg',
    angle: 0,
    height: 350,
    width: canvas.getWidth(),
    align: 'mid', //added
    originX: 'center', //added
    originY: 'center', //added
  });

  canvas.centerObject(image);
  canvas.add(image);
}

var imgObj1 = new Image();
//imgObj1.id='backgroundimg';
imgObj1.src = "template1.png";
var imgmain = imgObj1.onload = function() {
  var image1 = new fabric.Image(imgObj1);
  image1.set({
    id: 'backgroundimg',
    angle: 0,
    height: canvas.getHeight(),
    width: canvas.getWidth(),
    evented: false,
  });

  //canvas.centerObject(image1);
  canvas.add(image1);
}

//On Image Browse and Set on Canvas
document.getElementById('uploadedImg').onchange = function handleImage(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(file) {
    addImage(file.target.result);
  }
  reader.readAsDataURL(file);
}

function addImage(imgLink) {
  fabric.Image.fromURL(imgLink, function(img) {
    img.set({
      'left': 50
    });
    img.set({
      'top': 150
    });
    img.scaleToWidth(250);
    img.scaleToHeight(250);
    var cnt = 0;
    var objs = canvas.getObjects();
    //var objs = canvas.getActiveObject();
    if (objs.length > 0) {
      objs.forEach(function(e) {
        if (e && e.type === 'image' && e.id === "changeimg") {
          e._element.src = imgLink;;
          canvas.renderAll();
          cnt = 1;
        }
      });
    }
  });
}