如何将Base64图片传入TensorFlow JS？转换后张量全为0问题排查

核心问题就是图片加载是异步操作——你设置img.src后立刻调用tf.browser.fromPixels，此时图片还没完成加载，所以读取到的是全0值的空张量，和你猜测的异步处理缺失完全一致。

修复后的代码 #

将函数改为异步形式，通过onload回调确保图片加载完成后再进行张量转换：

const imageToTensor = async (imageData: string): Promise<tf.Tensor3D> => {
  return new Promise((resolve) => {
    const img = new Image();
    // 处理可能的跨域问题（本地Base64可忽略，但建议保留）
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      const imageFeatures = tf.tidy(() => {
        // 用TensorFlow的resize方法统一调整尺寸，比直接设置img.width/height更准确
        const imageAsTensor = tf.browser.fromPixels(img)
          .resizeNearestNeighbor([224, 224]);
        imageAsTensor.print();
        return imageAsTensor;
      });
      resolve(imageFeatures);
    };
    img.src = imageData;
  });
};

关键修改点 #

1. 异步处理：用Promise包装图片加载流程，确保只有图片加载完成后才执行张量转换
2. 正确的尺寸调整：改用tf.image.resizeNearestNeighbor（或resizeBilinear）调整图片尺寸，直接设置img.width/height仅改变显示尺寸，不会修改图片实际像素数据
3. 跨域兼容：添加crossOrigin属性，避免某些场景下的图片加载跨域限制

使用方式 #

调用该函数时需要配合await：

// 示例调用
const tensor = await imageToTensor(yourBase64ImageData);
// 后续训练逻辑...

额外排查点 #

如果修复后仍然出现全0张量，可先验证Base64数据有效性：把Base64字符串直接赋值给<img>标签的src属性，看是否能正常显示图片，排除数据损坏问题。

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