Deploying webapp coded in impact javascript game engine locally, results in CORS on chrome

Question

I am trying to make a webapp (developed with impact js game engine), able to run locally without the need of a localhost (using file:///C:/...) and I am required to make it work on chrome.

The main issue that it does not work on chrome is that chrome blocks my media (mainly images in png/jpg) from being loaded from media folder due to CORS issues.

After spending a few days reading up and trying a few methods I am not able to resolve this issue. Anybody with experience in this please tell me if it is possible and if it is, what methods should I go about on this.

Methods I have tried:

1) setting img.crossOrigin = "anonymous" (failed, this is still blocked by chrome)

2) opening chrome with flag --allow-file-access-from-files (worked, but not a feasible method for end user)

3) reading images and converting them to data uri format (failed, data uri conversion seems to be not working due to inherent CORs issue)

4) attempted to use appcache to cache all images into browser cache (failed, do not seem to work as it is not being accessed from a webserver)

UPDATE: I am now trying to edit the impact.image source code to try to convert the src to data url at the point of loading into the image

        load: function( loadCallback ) {

    function getBase64Image(img) {
        // Create an empty canvas element
        var img2 = document.createElement("img");
        var canvas2 = document.createElement("canvas");
        // Copy the image contents to the canvas
        var ctx2 = canvas2.getContext("2d");
        img2.onload = function(){
        canvas2.width = img2.width;
        canvas2.height = img2.height;

            };

        img2.onerror = function() {console.log("Image failed!");};
        img2.src = img + '?' + Date.now();
        ctx2.drawImage(img2, 0, 0, img2.width, img2.height);
        return canvas2.toDataURL("image/png");
    }

    if( this.loaded ) {
        if( loadCallback ) {
            loadCallback( this.path, true );
        }
        return;
    }
    else if( !this.loaded && ig.ready ) {
        this.loadCallback = loadCallback || null;
        this.data = new Image();
        this.data.onload = this.onload.bind(this);
        this.data.onerror = this.onerror.bind(this);
        //this.data.src = ig.prefix + this.path + ig.nocache;
        //old src sets to local file, new src sets to data url generated
        this.data.src = getBase64Image(this.path);

    }
    else {
        ig.addResource( this );
    }

    ig.Image.cache[this.path] = this;
},

for some reason the image is not being loaded into the function, will it work even if i get the image load to load into the getBase64Image function?

Answer 1

Short of saving everything as pre-generated, Base-64 data-uris, which you bake into a JS file, or a script tag on your "index.HTML" page, you aren't going to have much luck here -- especially if your intent is to distribute this to an audience disconnected from a webserver (to at least provide a domain for the appcache).

Mind you, in order to generate the data-uris, you, yourself are probably going to require localhost (or a build-tool).