Question

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

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

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

图像本身存储在本地并显示在网页中（整个页面目前仅在本地运行）。如何将图像馈送到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;

请注意，某些服务器可能不授予权限。 Read more about WebGL CORS error here.

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

$ python3 -m http.server [port]

您将不会收到CORS错误。

Answer 2

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

是的，所以您需要使用相对路径，而不要使用file://

关于<img>元素，如果查看documentation of .fromPixels()，您会发现它支持多种类型的像素格式：

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

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

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

2 个答案: