Skip to content
This repository was archived by the owner on Jul 27, 2024. It is now read-only.

How to load a non local image atlas? #231

@markddesimone

Description

@markddesimone

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions