facets
facets copied to clipboard
How to load a non local image atlas?
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
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