Fabric.js中如何等待JSON加载完所有元素？loadFromJSON后getObjects无返回

这个场景我太熟悉了——当JSON里包含图片链接时，loadFromJSON会异步加载这些图片资源，所以你紧接着调用canvas.getObjects()时，图片还没加载完成，自然拿不到完整的对象列表。下面给你几个实用的解决方案：

方法1：利用loadFromJSON的回调+监听图片加载状态 #

loadFromJSON的第二个参数是解析完成后的回调，但这个回调只是完成了JSON的解析，图片可能还在加载中。我们可以在这个回调里，遍历所有对象，等待图片加载完成：

canvas.loadFromJSON(jsonData, function() {
  // 先获取所有对象
  const objects = canvas.getObjects();
  // 筛选出所有图片对象
  const imageObjects = objects.filter(obj => obj.type === 'image');
  
  // 如果没有图片，直接执行后续逻辑
  if (imageObjects.length === 0) {
    handleAllLoaded();
    return;
  }
  
  // 统计已加载的图片数量
  let loadedCount = 0;
  imageObjects.forEach(imgObj => {
    // 如果图片已经加载完成
    if (imgObj.isLoaded) {
      loadedCount++;
      checkAllLoaded();
    } else {
      // 监听图片加载完成事件
      imgObj.on('loaded', function() {
        loadedCount++;
        checkAllLoaded();
      });
    }
  });
  
  function checkAllLoaded() {
    if (loadedCount === imageObjects.length) {
      handleAllLoaded();
    }
  }
});

function handleAllLoaded() {
  // 所有元素（包括图片）都加载完成了，现在可以安全调用getObjects()
  const allObjects = canvas.getObjects();
  console.log('所有元素加载完成：', allObjects);
  // 这里写你的后续逻辑
}

方法2：先预加载所有图片，再调用loadFromJSON #

我们可以先用fabric.util.loadImages把JSON里的所有图片链接先加载好，再传入loadFromJSON，这样加载完成后就能立即获取对象：

// 先从JSON数据里提取所有图片链接
function extractImageUrls(jsonData) {
  const urls = [];
  const parsedJson = typeof jsonData === 'string' ? JSON.parse(jsonData) : jsonData;
  parsedJson.objects.forEach(obj => {
    if (obj.type === 'image' && obj.src) {
      urls.push(obj.src);
    }
  });
  return urls;
}

// 预加载所有图片
const imageUrls = extractImageUrls(jsonData);
fabric.util.loadImages(imageUrls, function(loadedImages) {
  // 现在所有图片都加载完成了，调用loadFromJSON
  canvas.loadFromJSON(jsonData, function() {
    // 这里可以直接调用getObjects()，因为图片已经预加载好了
    const allObjects = canvas.getObjects();
    console.log('所有元素加载完成：', allObjects);
    // 后续逻辑
  });
});

方法3：使用Promise封装（更现代的写法） #

如果喜欢用Promise和async/await，可以把加载过程封装成Promise，这样代码更简洁：

function loadCanvasWithImages(canvas, jsonData) {
  return new Promise((resolve, reject) => {
    canvas.loadFromJSON(jsonData, function() {
      const objects = canvas.getObjects();
      const imageObjects = objects.filter(obj => obj.type === 'image');
      
      if (imageObjects.length === 0) {
        resolve(canvas);
        return;
      }
      
      let loadedCount = 0;
      imageObjects.forEach(imgObj => {
        if (imgObj.isLoaded) {
          loadedCount++;
          checkComplete();
        } else {
          imgObj.on('loaded', () => {
            loadedCount++;
            checkComplete();
          });
          imgObj.on('error', (err) => {
            reject(err);
          });
        }
      });
      
      function checkComplete() {
        if (loadedCount === imageObjects.length) {
          resolve(canvas);
        }
      }
    }, null, {
      // 可以在这里配置加载选项，比如跨域等
      crossOrigin: 'anonymous'
    });
  });
}

// 使用async/await调用
async function initCanvas() {
  try {
    await loadCanvasWithImages(canvas, jsonData);
    const allObjects = canvas.getObjects();
    console.log('所有元素加载完成：', allObjects);
    // 后续逻辑
  } catch (err) {
    console.error('加载失败：', err);
  }
}

initCanvas();

需要注意的是，如果你的图片存在跨域问题，记得在加载时配置crossOrigin选项，避免图片加载失败导致的问题。

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