tf.browser.fromPixels 从 img 元素返回全零答案

【问题标题】：tf.browser.fromPixels returns all zeros from img elementtf.browser.fromPixels 从 img 元素返回全零
【发布时间】：2019-07-17 16:39:48
【问题描述】：

我正在使用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>

【问题讨论】：

标签： javascript html tensorflow.js

【解决方案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);
  }

【讨论】：