CORS and Billboard.image

CesiumJS
1

I have a Javascript Image() object that I’ve successfully loaded from a CORS-enabled server, but when I attempt to use that image as the “image” member for a Billboard object, I get this error:

Billboard.js:952 Error loading image for billboard: SecurityError: Failed to execute ‘texSubImage2D’ on ‘WebGLRenderingContext’: The cross-origin image at [myImageURL] may not be loaded.

This is really strange, because I’ve already successfully loaded it into a JS Image() object. Why would this be a problem?

Thanks,

Dave

1 Like
2

Found the solution to my problem (supported in at least FireFox and Chrome).

// Before setting the .src of the image, set:

myImage.crossOrigin = ‘anonymous’;

Explained nicely here:

https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/

  • Dave
3

Yes, images are not loaded with CORS by default. You can also use Cesium’s loadImage function which handles CORS as well as adapting the Image callback to a Promise, which is commonly used in Cesium.

http://cesiumjs.org/Cesium/Build/Documentation/loadImage.html