Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to load a non local image atlas? #231

Open
markddesimone opened this issue Oct 10, 2020 · 0 comments
Open

How to load a non local image atlas? #231

markddesimone opened this issue Oct 10, 2020 · 0 comments

Comments

@markddesimone
Copy link

I would like to load an image atlas that I have uploaded to google drive. It is shareable to anyone with the link. However it does not show in facets-dive. If I load the file locally with relative path it loads fine.

This is the link to my file:
https://drive.google.com/file/d/1Fvpd-T1-WI2XfaC_i5Gj2hh3AIJ_t9Up/view?usp=sharing, tile size is 324x216

I understand this has something to do with cross origin read blocking but do not know how to get around it. Is there something I can do in the HTML to work around CORB?

I checked https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ and as an experiment I downloaded facets-jupyter.html from https://raw.githubusercontent.com/PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html. I found the function Om(b,d,f,h) in <script>//WEBPATH/facets-dive/lib/sprite-atlas.js and tried modifying it, testing with this modified script instead. These are the resuts I got in the console:

with the original:

w=new Image;
void 0!==f&&(w.crossOrigin=f);
b.pendingImageCount++
THREE.WebGLRenderer: Texture has been resized from (17172x11232) to (8192x5358).

with:

w=new Image;
w.crossOrigin="anonymous";
void 0!==f&&(w.crossOrigin=f);
b.pendingImageCount++
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://drive.google.com/file/d/1Fvpd-T1-WI2XfaC_i5Gj2hh3AIJ_t9Up/view?usp=sharing with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

THREE.WebGLRenderer: Texture has been resized from (17172x11232) to (8192x5358).

with:

w=new Image;
w.crossOrigin="anonymous";
b.pendingImageCount++;
Access to image at 'https://drive.google.com/file/d/1Fvpd-T1-WI2XfaC_i5Gj2hh3AIJ_t9Up/view?usp=sharing' from origin 'http://0.0.0.0:8885' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

THREE.WebGLRenderer: Texture has been resized from (17172x11232) to (8192x5358).

Any suggestions greatly appreciated!

thanks

@markddesimone markddesimone changed the title How to load a non local image atlas How to load a non local image atlas? Oct 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant