如何在张量流中使用图像作为输入.js?

Question

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

CNN模型在keras中训练，然后转换为张量流.js格式，并且加载没有问题。但是，当我尝试使用 tensorflow.js中的 tf.fromPixel 方法将图像用作输入时，我遇到了一个问题，指出：

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

图像本身在本地存储并显示在网页中(整个页面目前只是在本地运行(。我将如何将图像输入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()的文档，您可以看到它允许多种类型的像素格式：

像素(图像数据|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement(要从中构造张量的输入图像。支持的图像类型均为 4 通道。

一个是HTMLImageElement，因此您可以简单地将<img>元素传递给.fromPixels()。