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

[iduart]

In my example https://ideanb.github.io/best-guess/

I can classify images in the same server such as

images/dexter1.jpg
images/dexter2.jpg
images/dee2.jpg
images/dee4.jpg

But, If I try to classify an external link, let's say https://images-na.ssl-images-amazon.com/images/I/41Xe%2B6VIgtL.jpg

It throws this error

gpgpu_util.js:153 Uncaught (in promise) DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded.
    at https://unpkg.com/[email protected]/dist/ml5.min.js:1:170216
    at se (https://unpkg.com/[email protected]/dist/ml5.min.js:1:160367)
    at et (https://unpkg.com/[email protected]/dist/ml5.min.js:1:170191)
    at e.uploadPixelDataToTexture (https://unpkg.com/[email protected]/dist/ml5.min.js:1:177628)
    at e.fromPixels (https://unpkg.com/[email protected]/dist/ml5.min.js:1:212633)
    at e.fromPixels (https://unpkg.com/[email protected]/dist/ml5.min.js:1:673668)
    at e.fromPixels (https://unpkg.com/[email protected]/dist/ml5.min.js:1:113965)
    at https://unpkg.com/[email protected]/dist/ml5.min.js:1:81527
    at e.tidy (https://unpkg.com/[email protected]/dist/ml5.min.js:1:609188)
    at Object.n.value (https://unpkg.com/[email protected]/dist/ml5.min.js:1:81504)

Any Ideas on how to make it accept external links?

[cvalenzuela]

You should set the crossorigin attribute in the html tag:

<img src="https://images-na.ssl-images-amazon.com/images/I/41Xe%2B6VIgtL.jpg" crossorigin="anonymous"/>

See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

[iduart]

@cvalenzuela Thanks for your response

I was already using crossOrigin="anonymous" in my example.

I was able to fix this issue by setting crossOrigin before src attribute.

const img = new Image();
img.crossOrigin = "anonymous";
img.src = url;
img.width = 224;
img.height = 224;

[cvalenzuela]

great!

[shiffman]

I'm not sure if it makes sense to re-open this or file a new issue, but it looks like this problem is more significant due to issues it causes with the p5 web editor (which hosts image uploads via an S3 bucket). @catarak and I were just discussing this in an e-mail thread.

I’m actually able to reproduce this bug outside of the web editor, locally on my computer, using just p5.js and ml5.js. The S3 bucket also whitelists localhost:8000 for CORS, so if serve the example locally from localhost:8000, and I try to load an image from the S3 bucket, e.g. https://assets.editor.p5js.org/57c1b671a44b7d771d5c6d2c/0b4ac100-6a05-40d2-a378-2baa137710c2.jpg

For the time being I created an example that shows image classification with drag and drop to avoid this issue:
https://editor.p5js.org/ml5/sketches/S1PLinE27

[catarak]

The workaround we've found to get this to work with p5.js is to do the following:

let classifier = ml5.imageClassifier('MobileNet', modelReadyCallback);
let img = createImg('different_origin_but_CORS_enabled.jpg');
img.elt.crossOrigin = "Anonymous";
classifier.predict(img, gotResults);

is this just inevitable with how WebGL operates with respect to CORS? I guess it's just weird to me that even if the image is being served with CORS enabled, and the origin is whitelisted, this error still comes up.

[shiffman]

Would supporting loadImage() as discussed https://github.com/ml5js/ml5-library/issues/92#issuecomment-396922783 help with the CORS stuff?

[catarak]

How do you use a p5 img with ml5? Do you write it to the canvas, and then input the canvas to the classifier? I couldn't figure out how to get that working.

[shiffman]

I believe support was added via https://github.com/ml5js/ml5-library/pull/206 from @meiamsome, but I am having trouble getting loadImage() plus ml5.ImageClassifier() to work, continuing to test...

[addys888]

If you tried it over lightning component then please degrade your Component API version with 39 or less.

[shiffman]

An update I'm getting loadImage() to work now. And I can also run classification on canvas! I'm not sure why I didn't get this to work before but here is a demonstration! Very exciting!

https://editor.p5js.org/ml5/sketches/EB4LMfd1h

[eliamjuda]

ajajj ya entendi jaja ok

[hiteshsahu]

If using React use *crossOrigin instead of crossorigin*

<img
          alt="classy-image"
          crossOrigin="anonymous"
          ref={image => {
            this.image = image;
          }}
          src="./assets/bird.jpeg"
          id="image"
          width="400"
        />

[AliouneY]

I'm confused as to why the error claims that my element contains cross-origin data when I loaded it from a local source...can anyone explain why that might be?

[joeyklee]

Hi All. It seems this has been resolved. I will close this for now. Feel free to reopen if it is still relevant. Thanks for your participation!

[rahuldess]

I'm confused as to why the error claims that my element contains cross-origin data when I loaded it from a local source...can anyone explain why that might be?

Even I have the same question

[haoruilee]

I have the same question.