如何在tensorflow.js中使用图像作为输入？

Question

我正在开发一个网站上使用卷积神经网络，但不确定如何为图像创建输入。

CNN模型在keras中进行了训练，然后转换为tensorflow.js格式，并且可以正常加载。 但是，当我尝试将图像用作tensorflow.js中tf.fromPixels方法的输入时，遇到了一个问题：

“未捕获的DOMException：无法在'WebGL2RenderingContext'上执行'texImage2D'：图像元素包含跨域数据，并且可能无法加载。”

图像本身存储在本地并显示在网页中（整个页面目前仅在本地运行）。 我将如何将图像输入tensorflow.js CNN模型？ 无论如何，是否可以通过html <img/>标记使用本地图像，还是必须在线托管？ 我的猜测是fromPixels()方法会导致CORS错误，但我不确定是否确实如此。

Answer 1

您是对的，CORS错误是来自WebGL的fromPixels（）方法。

有两种解决方法。

首先，您可以使用以下功能向服务器请求权限

function requestCORSIfNotSameOrigin(img, url) {
  if ((new URL(url)).origin !== window.location.origin) {
    img.crossOrigin = ""; //this requests permission from the server
  }
}

并像这样使用它：

...
requestCORSIfNotSameOrigin(img, url);
img.src = url;

请注意，某些服务器可能不授予权限。 在此处阅读有关WebGL CORS错误的更多信息。

如果您想测试代码而不出现此错误，则可以运行本地服务器

$ python3 -m http.server [port]

而且您不会收到CORS错误。

Answer 2

我的猜测是fromPixels（）方法会导致CORS错误，但我不确定是否确实如此。

是的，这是正确的，因此您需要使用相对路径，而不要使用file://

关于<img>元素，如果查看.fromPixels()的文档，您会发现它允许多种类型的像素格式：

pixel （ ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement ）用于构造张量的输入图像。 支持的图像类型均为4通道。

一个是HTMLImageElement因此您只需将<img> .fromPixels()传递给.fromPixels() 。