Javascript 如何使用fabricjs向画布添加多个图像

我已经阅读了几个关于这个话题的问题/答案，但我似乎找不到解决办法。很抱歉，如果你们发现这个问题重复了

这是我的情况； 假设我有一个菜单供用户点击，它将在画布上显示所选项目的图像，用户还可以根据需要调整/拖放该图像。现在，我可以用这个代码使它只工作一次

addAction(selectedAction: any) {
  var canvas = new fabric.Canvas('c');
  var imgObj = new Image();
  imgObj.src = selectedAction.image;
  imgObj.onload = function() {
    var imgInstance = new fabric.Image(imgObj, {
        left: 200,
        top: 200,
      });
    canvas.add(imgInstance);
  }

问题是，当用户单击菜单中的另一项时，画布上的前一项将消失，而当前项将显示在画布上。但是如果我点击那张图片，它就会消失，而之前的图片会显示在画布上

我希望他们俩同时留在画布上。请给出建议。

真正的快速回答：

---

设置一个函数来处理添加，然后在需要添加新图像时调用该函数。我假设您希望将url传递给函数并执行其他操作，但这是一个非常简单的示例

每次调用此函数时，您似乎都在重新创建画布。尝试将其外部化，然后调用canvas.remove来删除前面的图像。谢谢您的回答，但您能给我一个示例代码吗？我对这些画布的东西真的很陌生。这正是解决方案！非常感谢。@Ben谢谢。这很有效。为什么只使用

fabric.Image.fromURL

多次都不起作用？更具体地说，我在循环中使用它，它总是粘贴相同的图像。@Simone您有代码示例吗？如果没有更多的信息，很难说问题出在哪里。当我在for循环中调用你的函数时，它可以工作，但是如果我在for循环中复制并粘贴你函数的内容，它就不再工作了。第二个例子是不安全的异步代码。循环的两次迭代都引用了周围范围中相同的

pos

变量。因为

fabric.Image.fromURL

调用是异步的，所以循环的两个迭代都会执行，然后图像会加载到画布中。因此，两个图像都使用相同的

pos

变量加载到画布上。您可以通过尝试移动图像在小提琴中看到这一点，因为第二个图像位于正下方。我还必须升级到fabric 1.7.20才能使演示正常工作，但这可能与此无关。

var canvas = ...// setup canvas

function addImage (url) {
    fabric.Image.fromURL(url, function (img) {
        // deal with image
       canvas.add(img);
    });
}