How to use image as input in tensorflow.js?

Question

I am working on using a convolutional neural network in a website that I am developing but am unsure how to create an input for an image.

The CNN model was trained in keras and then converted to a tensorflow.js format and is loading without problem. However, when I am trying to use an image as an input with the tf.fromPixels method within tensorflow.js, I am experiencing an issue stating:

"Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded."

The image itself is locally stored and being shown in the webpage (the entire page is just being run locally at the moment). How would I go about feeding an image into the tensorflow.js CNN model? Is there anyways to use a local image through an html <img/> tag or does it have to be hosted online? My guess is that the fromPixels() method is causing a CORS error but I'm unsure if thats certainly the case and anyways around it.

Jessica · Accepted Answer · 2019-04-12 16:46:00Z

2

You're right in that the CORS error is coming from WebGL's fromPixels() method.

There are two ways you can get around it.

First, You could request permission from the server with a function like

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

and use it like this:

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

Note that some servers may not grant permission. Read more about WebGL CORS error here.

If you want to test your code without getting this error you could run a local server

$ python3 -m http.server [port]

and you won't get a CORS error.

answered Apr 12, 2019 at 16:46

Jessica

715 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sebastian Speitel · Accepted Answer · 2018-06-22 18:33:22Z

0

My guess is that the fromPixels() method is causing a CORS error but I'm unsure if thats certainly the case and anyways around it.

Yes that's correct, so you need use a relative path and don't use file://

And regarding the <img> element if look at the documentation of .fromPixels() you can see it allows multiple types of pixel formats:

pixels (ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement) The input image to construct the tensor from. The supported image types are all 4-channel.

One is HTMLImageElement so you can simply pass the <img>-element to .fromPixels().

edited Jun 22, 2018 at 18:33

answered Jun 22, 2018 at 17:44

Sebastian Speitel

7,3772 gold badges21 silver badges38 bronze badges

14 Comments

Anish Khanna Over a year ago

Even when doing that I am still being shown the same error. I pass in a document.getElementById corresponding to the ID of the image but the same CORS error is being shown.

Sebastian Speitel Over a year ago

Are you using relative paths or file://?

Anish Khanna Over a year ago

I'm using relative paths. Would that be cause for an issue?

Sebastian Speitel Over a year ago

CORS errors usually only come from cross-domain accesses like yoururl.com -> anotherurl.com or localhost -> file:// or file:// -> anotherurl.com.

Sebastian Speitel Over a year ago

file:// to file:// is always cross-origin

|

Collectives™ on Stack Overflow

How to use image as input in tensorflow.js?

2 Answers 2

Comments

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related