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

Question

我正在开发一个网站上使用卷积神经网络，但不确定如何为图像创建输入。CNN模型在keras中进行了训练，然后转换为tensorflow.js格式，并且可以毫无问题地进行加载。但是，当我试图将图像用作tensorflow.js中的tf.fromPixels方法的输入时，遇到了一个问题：“未捕获的DOMException：无法在'WebGL2RenderingContext'上执行'texImage2D'：图像元素包含跨域数据，并且可能无法加载。”图像本身存储在本地并显示在网页中（整个页面目前仅在本地运行）。如何将图像输入到tensorflow.jsCNN模型中？无论如何，是否可以通过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()。