ml5 错误：传递给 tf.browser.fromPixels() 的像素不能为空答案

【问题标题】：ml5 Error: pixels passed to tf.browser.fromPixels() can not be nullml5 错误：传递给 tf.browser.fromPixels() 的像素不能为空
【发布时间】：2020-10-07 23:05:50
【问题描述】：

按照tutorial，我用 p5.js 和 ml5.js 创建了一个非常简单的脚本。

在设置功能中，单击按钮后，我将图像添加到分类器中。但是，当我单击按钮时，出现像素错误。这就是我的目录的样子

let pinkButton
console.log('ml5 version:', ml5.version);

function gotResults(error, results) {
  console.log("ERROR", error);
}

function setup() {
  mobileNet = ml5.featureExtractor('MobileNet')
  classifier = mobileNet.classification()
  pinkButton = createButton('add pink')
  pinkButton.mousePressed(function() {
    classifier.addImage('./images/pink/1.png', 'pink')
    classifier.addImage('./images/pink/2.png', 'pink')
    classifier.addImage('./images/pink/3.png', 'pink')
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
<!-- ml5 -->
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>

【问题讨论】：

您使用的是什么版本的 ml5 和 p5？
@yuRa 正如上面脚本标签中提到的，我认为 p5 是 1.1.9 而 ml5 是 ml5@0.4.3
This github post mentions the same problem
“加载自定义模型后”我看不到它。我的模型加载成功。该帖子上的所有解决方案似乎都没有帮助我:(@yuRa

标签： javascript html tensorflow tensorflow.js ml5

【解决方案1】：

addImage 添加 HTMl imageElement 而不是 url。因此，要添加图像，要么图像已经加载到页面中并且可以查询，要么需要创建新图像。

选项 1：图片已加载

image = document.querySelector("use-css-selector")
classifier.addImage(image, label)

选项 2：创建新图像

function load(url){
  return new Promise((resolve, reject) => {
    const im = new Image()
        im.crossOrigin = 'anonymous'
        im.src = 'url'
        im.onload = () => {
          resolve(im)
        }
   })
}

image = await load(url)
classifier.addImage(image, label)

【讨论】：