Fabric.js：文件上传替换Canvas图片失败问题排查

这个问题我碰到过好多次啦，核心原因是你每次上传新图片时都创建了一个新的Fabric.js图片对象并添加到画布，但旧的图片对象并没有被移除或更新——要么旧图还留在画布上（可能被新图挡住，也可能因层级问题显示不出来），要么你没复用已有的图片实例，导致看起来没替换成功。

下面是具体的解决思路和代码示例：

关键思路 #

我们需要在全局（或合适的作用域）保存第二张图片的Fabric.js实例引用，这样每次上传新图片时：

• 如果是首次上传：创建新的图片对象，添加到画布，同时保存引用
• 如果是后续上传：直接更新已有图片对象的src，而不是新建对象

完整代码示例 #

首先初始化画布和静态图，同时声明变量保存第二张图的引用：

// 初始化画布
const canvas = new fabric.Canvas('yourCanvasId');

// 添加静态的第一张图片（这里假设你已经完成了静态图的加载逻辑）
const staticImage = new fabric.Image(...); // 你的静态图初始化代码
canvas.add(staticImage);

// 声明变量保存第二张可替换图片的引用
let replaceableImage = null;

然后修改你的文件上传事件处理函数：

document.getElementById('imgLoader').onchange = function handleImageUpload(e) {
  const file = e.target.files[0];
  if (!file) return; // 没有选择文件就直接返回

  const reader = new FileReader();
  reader.onload = function(event) {
    const imgDataUrl = event.target.result;

    if (replaceableImage) {
      // 已有图片，直接更新它的src
      replaceableImage.setSrc(imgDataUrl, function() {
        // 图片加载完成后重新渲染画布
        canvas.renderAll();
      });
    } else {
      // 首次上传，创建新的图片对象
      fabric.Image.fromURL(imgDataUrl, function(newImg) {
        // 可以根据需求设置图片的位置、缩放等属性
        newImg.set({
          left: 150, // 示例位置
          top: 150,
          scaleX: 0.6,
          scaleY: 0.6
        });
        // 保存引用
        replaceableImage = newImg;
        // 添加到画布并渲染
        canvas.add(replaceableImage);
        canvas.renderAll();
      });
    }
  };
  reader.readAsDataURL(file);
};

为什么之前的代码不行？ #

如果你之前的代码是每次上传都调用fabric.Image.fromURL()然后canvas.add()，那么画布上会存在多个图片对象——旧的图片并没有被删除，只是可能被新图覆盖（如果位置相同），或者因为层级关系显示不出来，导致你以为图片没替换。

而通过保存图片实例的引用，我们直接复用了同一个对象，更新它的图片源，这样画布上始终只有一个可替换的图片对象，自然就能实现“替换”的效果了。

另外要注意：Fabric.js的setSrc()方法是异步的，所以必须在它的回调函数里调用canvas.renderAll()，确保图片加载完成后再重新渲染画布，否则可能出现更新不及时的问题。

内容的提问来源于stack exchange，提问作者Igor P.