Herbert Posted August 18, 2017 Share Posted August 18, 2017 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? Quote Link to comment Share on other sites More sharing options...
xerver Posted August 18, 2017 Share Posted August 18, 2017 My guess is you are experiencing this issue: https://github.com/pixijs/pixi.js/issues/4007 Looks like the loader also has a bug where it doesn't set the crossOrigin value of videos/audio correctly. You can work around it by creating the video DOM element youself, setting the crossOrigin value, and then passing it into the loader with: .add('video-url', { metadata: { loadElement: myVideoDomElement } }) However, the image is a bit more interesting. You can try ensuring it *doesn't* set the crossOrigin attribute with: .add('json-url', { crossOrigin: '' }) Edit: I opened a couple issues that this post made me think of, thanks! https://github.com/englercj/resource-loader/issues Herbert 1 Quote Link to comment Share on other sites More sharing options...
Herbert Posted August 21, 2017 Author Share Posted August 21, 2017 Hi xerver: you are right about audio part, i am meeting the issue as you posted, the method in the article works for me, I also try the loader solution you suggest, but it doesn't work. As for the spritesheet part, I had actually tried setting empty string already(I read it from your response on another article), but it doesn't work, maybe it's because it is non-cross-orgin for the json file, but it is cross-orgin for the image file, so the cross-orgin property would be incorrect for either of them? Quote Link to comment Share on other sites More sharing options...
Herbert Posted August 21, 2017 Author Share Posted August 21, 2017 or, this is the article I mentioned which has your response(https://github.com/pixijs/pixi.js/issues/4056) as you said, not setting crossOrigin will dirty the canvas, could it be the reason? since it might restrict the access to some image data. Quote Link to comment Share on other sites More sharing options...
xerver Posted August 21, 2017 Share Posted August 21, 2017 It would restrict access to *reading* data from the canvas. I think the next step here is for you to build a minimal example that reproduces the error and lets debug it. A jsFiddle or similar would be perfect. Quote Link to comment Share on other sites More sharing options...
Herbert Posted August 22, 2017 Author Share Posted August 22, 2017 I found the problem when I am making the fiddle. It turns out in my case I should pass "anonymous" to crossOrigin instead of an empty string. The reasons are 1. It Seems empty string is the solution for canvasRenderer, and I am using webgl. 2. My target server has proper CORS header, so I don't need to avoid crossOrigin attribute being set(actually for webgl, I think I need it to be set to access cross origin resources). // load the local json, pass 'anonymous' to crossOrigin since my image is on another domain PIXI.loader.add("/src/image/spritesheet.json", {crossOrigin: 'anonymous'}); // set the baseUrl to the domain where my image is located PIXI.loader.baseUrl = CDN_SERVER_BASE_URL; PIXI.loader.load(() => { var image = PIXI.Sprite.fromImage(FRAME_KEY); }); thanks for your help xerver, and looking forward to the features that you added to the milestone. * please correct me If I am wrong~ Quote Link to comment Share on other sites More sharing options...
Herbert Posted August 22, 2017 Author Share Posted August 22, 2017 I am having another issue, to avoid cache, I will add ref number after filename. PIXI.loader.add("/src/image/spritesheet.json?123", {crossOrigin: 'anonymous'}); but it wont be passed to image path, so the image on the cdn server will be cached. How can I load the image as "spritesheet.png?123" instead of "spritesheet.png". Quote Link to comment Share on other sites More sharing options...
xerver Posted August 22, 2017 Share Posted August 22, 2017 This is because the loader loads the URLs it is given. You have the query string on the json file, but in the json file it doesn't specify a query string on the image, so it doesn't use one. You can check out the "defaultQueryString" property (http://englercj.github.io/resource-loader/Loader.html#defaultQueryString) which will add a query to the end of every URL that loader makes. That can ensure that everything is cache busted. Herbert 1 Quote Link to comment Share on other sites More sharing options...
Herbert Posted August 24, 2017 Author Share Posted August 24, 2017 I think defaultQueryString is exactly what I want, thanks xerver 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.