tf.browser.fromPixels returns img 元素全为零

Question

我正在使用 tensorflowjs 做一些前端图像分类。我正在尝试使用 tf.browser.fromPixels 将 img 元素转换为张量。但是，我得到了形状为 [160, 160, 3] 的所有零点。我正在使用 FileReader api 通过 <input type="file"> 元素从文件系统读取图像。这是一些代码：

function getFiles(event) {
  const files = event.target.files;
  let tempStore = [];
  for (let i = 0; i < files.length; ++i) {
    tempStore.push(files[i]);
  }
  return tempStore;
}

const imageElement = document.getElementById("upload");
  imageElement.addEventListener("change", event => {
    const files = getFiles(event);
    Promise.all(files.map(loadImg)).then(d => {
      console.log("All done !!!", d);
    });
  });

const loadImg = imgFile => {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    let imgEl = document.createElement("img");
    reader.onload = async e => {
      imgEl.src = e.target.result;
      imgEl.setAttribute("width", 160);
      imgEl.setAttribute("height", 160);
      document.body.append(imgEl);
      const fromPixels = tf.browser.fromPixels(imgEl);
      resolve(fromPixels);
    };
    reader.onerror = reject;
    reader.readAsDataURL(imgFile);
  });
};

图像正确附加到文档正文。 imageElement 的形式为： <img src="data:image/jpeg;base64,....." width=160 height=160>

Answer 1

当 img 标签尚未加载时，您正在从图像创建张量。这是要走的路

  imgEl.src = e.target.result;
  imgEl.setAttribute("width", 160);
  imgEl.setAttribute("height", 160);
  document.body.append(imgEl);
  im.onload = () => {
   // create the tensor after the image has loaded
    const fromPixels = tf.browser.fromPixels(imgEl);
    resolve(fromPixels);
  }

tf.browser.fromPixels returns img 元素全为零

tf.browser.fromPixels returns all zeros from img element

javascript

html

tensorflow.js