如何在fabric.js中修改图片URL并实现实时显示？

使用Fabric.js向画布添加图片后，修改图片URL时遇到异常：点击修改按钮后，图片并未立即显示，仅留下可操作的占位区域，只有拖动该区域时图片才会出现。已尝试两种修改方式并调用renderAll()，但问题仍未解决。

直接修改图片DOM元素的src属性（_element.src）或手动调用setElement的方式存在两个核心问题：

1. 图片加载是异步操作，调用renderAll()时新图片可能尚未加载完成，画布仍渲染旧内容；
2. 直接操作Fabric.js的私有属性（如_element）并非官方推荐方式，Fabric.js无法感知到图片源的变化，也就不会主动触发重新渲染。只有拖动元素时触发了画布的重绘逻辑，此时图片可能已加载完成，才会显示出来。

使用Fabric.js官方提供的setSrc()方法修改图片源，该方法会自动处理图片的异步加载，加载完成后自动更新图片对象并触发画布渲染。同时，建议直接使用Fabric.js内置的getActiveObject()方法获取当前选中的图片，无需手动维护选中状态变量。

修正后的完整代码 #

<button id="change">Change</button>
<canvas id="canvas" class="myStage" width="800" height="400"></canvas>

<script>       
"use strict";
const canvas = new fabric.Canvas("canvas", { containerClass: "myStage" });
const changeBtn = document.getElementById("change");
changeBtn.addEventListener("click", changeSelected);

// 初始化添加图片
fabric.Image.fromURL("https://stackoverflow.design/assets/img/logos/teams/teams-logo-compact.svg", function (img) {
  canvas.add(img);
});

function changeSelected() {
  // 获取当前选中的图片对象
  const activeImg = canvas.getActiveObject();
  // 校验选中对象是否为Fabric图片
  if (!activeImg || !(activeImg instanceof fabric.Image)) return;
  
  // 使用setSrc修改图片源，加载完成后自动更新渲染
  activeImg.setSrc("https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg", function() {
    canvas.renderAll(); // 可选：setSrc内部已触发渲染，此处可省略
  });
}
</script>

关键说明 #

• setSrc()是Fabric.js专门用于修改图片源的API，内部会处理图片加载的异步流程，确保图片加载完成后再更新画布；
• 使用getActiveObject()替代手动维护选中状态，更符合Fabric.js的设计逻辑，避免事件绑定带来的状态不一致问题；
• 避免直接操作私有属性，遵循官方API规范能减少此类异常问题。

内容的提问来源于stack exchange，提问作者MyDaftQuestions