如何将URL图片传入TensorFlow的tf.fromPixels方法并解决格式报错

报错根因 #

你遇到的报错核心原因有两个：

1. tf.browser.fromPixels()是设计给浏览器环境使用的API，你当前用的是Node.js环境搭配tfjs-node，canvas包导出的Image实例不属于浏览器标准的HTMLImageElement类型，不符合入参要求
2. 直接给img.src赋值远程URL，在Node.js环境下加载稳定性不如先获取图片Buffer再处理，也容易出现时序问题

解决方案 #

方案1：使用tfjs-node原生API加载（推荐）

Node.js环境下不需要依赖canvas包，直接用tf.node.decodeImage解码图片Buffer为张量即可，代码如下：

const tf = require("@tensorflow/tfjs");
require("@tensorflow/tfjs-node");
const https = require("https");

// 封装方法获取URL图片的Buffer
function getImageBuffer(url) {
  return new Promise((resolve, reject) => {
    https.get(url, (res) => {
      const chunks = [];
      res.on("data", (chunk) => chunks.push(chunk));
      res.on("end", () => resolve(Buffer.concat(chunks)));
      res.on("error", reject);
    });
  });
}

async function load() {
  const imgUrl = "https://www.google.com/favicon.ico";
  const imgBuffer = await getImageBuffer(imgUrl);
  // 直接解码Buffer为tf张量，第二个参数3表示输出RGB三通道，可按需调整
  const output = tf.node.decodeImage(imgBuffer, 3);
  // 后续可正常使用output张量
  console.log(output.shape);
  // 用完记得释放张量避免内存泄漏
  output.dispose();
}

load();

方案2：兼容canvas Image实例的处理方式

如果你的业务逻辑需要先通过canvas处理图片，再传给TensorFlow，可以把Image实例转成符合要求的ImageData类型再传入fromPixels，代码如下：

const tf = require("@tensorflow/tfjs");
require("@tensorflow/tfjs-node");
const { createCanvas, Image } = require("canvas");
const https = require("https");

function getImageBuffer(url) {
  return new Promise((resolve, reject) => {
    https.get(url, (res) => {
      const chunks = [];
      res.on("data", (chunk) => chunks.push(chunk));
      res.on("end", () => resolve(Buffer.concat(chunks)));
      res.on("error", reject);
    });
  });
}

async function load() {
  const imgUrl = "https://www.google.com/favicon.ico";
  const imgBuffer = await getImageBuffer(imgUrl);
  const img = new Image();
  img.src = imgBuffer;
  await new Promise((resolve) => img.onload = resolve);
  
  // 把Image实例画到canvas上，再获取符合要求的ImageData
  const canvas = createCanvas(img.width, img.height);
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  const imgData = ctx.getImageData(0, 0, img.width, img.height);
  
  const output = tf.browser.fromPixels(imgData);
  console.log(output.shape);
  output.dispose();
}

load();

注意事项 #

• 生产环境优先使用方案1，性能更高，依赖更少
• tf张量使用完成后需调用dispose()方法释放内存，避免长时间运行出现内存泄漏
• 如果是浏览器环境下加载跨域图片，需要给Image实例设置crossOrigin = 'anonymous'，Node.js环境无跨域限制，无需该配置

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