Search the Community

Hi guys I have problems using cross origin resources, as I tested direct load of image is working, but the spritesheet & mp4 I still can't get it work, here is some use cases: // it works var image = PIXI.Sprite.fromImage(CROSS_ORIGIN_URL_IMAGE); // not work and showing the error message // Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded var videoTexture = PIXI.Texture.fromVideo(CROSS_ORIGIN_URL_MP4); var video = new PIXI.Sprite(videoTexture); // my json file is at local, and the image is on cdn server, so I change baseUrl right after add function, the image is loaded successfully, but when I try to use it, it shows the similar message // pixi.min.js:8 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at ... may not be loaded. PIXI.loader.add("/src/image/spritesheet.json"); PIXI.loader.baseUrl = CDN_SERVER_BASE_URL; PIXI.loader.load(() => { var image = PIXI.Sprite.fromImage(FRAME_KEY); }); the response header has the property "access-control-allow-origin: *", and the same mp4 URL works fine in DOM element, am I missing something?

Hello, I have an issue with loading a image in phaser. I keep getting the same error, it says "Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///Users/CindySchroer/Downloads/Plaatjes/Phaser/assets/images/background.png may not be loaded". I don't understand why it isn't loading (see attatched). Can anyone explain what is happening here? A little step-by-step would help because I'm a beginner. Thanks! Cindy

When trying to use pixelperfect checks IE9 throws SCRIPT5022: DOM Exception: SECURITY_ERR (18) mysprite.input.pixelPerfectOver = true;mysprite.input.pixelPerfectClick = true; I have this set if it matters: load.crossOrigin = "Anonymous" The server has header Access-Control-Allow-Origin: * Same code works on IE11, Chrome, Safari. Is there a good way to get this working? I can do other image operations on the same image such as redrawing it on bitmapdata and alpha masking without this problem.

I am hosting my audio assets on Amazon S3 and using Cloudfront cookies to control access to them. To send the cookies when loading these assets on Chrome I need to set withCredentials = true on XMLHttpRequest. Is there a sane way to do it, or do I need to monkeypatch Loader xhrLoad method?

Does anyone know why?

I'm a new member and relatively new to WebGL, but professionally I'm an angular/node developer. I'm currently setting up my Node server to proxy a 3rd party API in order to pull images and apply them as textures to meshes in my scene, but I can't get around the CORS issue that surrounds loading in the images. On the Node side, I've set the CORS (Access-Control-Allow-Origin) header, and everything else works fine, it's just with images I have a particular problem. BABYLON.Tools.LoadImage(response.archivesimages[0].image_uri, function(){console.log('loaded')},function(item, err){console.log('error:', err, item, 'not loaded' );});When I get the 'item' in the error return function, the image is there: <img crossorigin=​"anonymous" src=​"http:​/​/​cdn2.brooklynmuseum.org/​images/​opencollection/​archives/​size2/​S03i3079l01.jpg">​As it should, yet I'm still getting the CORS error. My response headers: access-control-allow-headers: Content-Type, Authorization, Content-Length, X-Requested-With access-control-allow-methods: GET,PUT,POST,DELETE,OPTIONS access-control-allow-origin: * <- (I've also tried domain-specific settings here) Am I missing a step?