Локальное развертывание веб-приложения, закодированного в игровом движке Javascript, приводит к появлению CORS на Chrome

Question

Я пытаюсь сделать веб-приложение (разработанное с использованием игрового движка Impact JS), способное работать локально без использования локального хоста (используя file:///C:/...), и мне нужно, чтобы оно работало на Chrome,

Основная проблема в том, что он не работает в chrome, заключается в том, что chrome блокирует загрузку моих медиафайлов (в основном изображений в png/jpg) из папки мультимедиа из-за проблем с CORS.

Потратив несколько дней на чтение и пробуя несколько методов, я не смог решить эту проблему. Кто-нибудь с опытом в этом, пожалуйста, скажите мне, если это возможно, и если это так, какие методы я должен пойти на это.

Методы, которые я попробовал:

1) setting img.crossOrigin = "anonymous" (не удалось, это все еще заблокировано chrome)

2) открытие chrome с флагом --allow-file-access-from-files (работает, но не выполнимый метод для конечного пользователя)

3) чтение изображений и преобразование их в формат данных URI (не удалось, преобразование данных URI, похоже, не работает из-за внутренней проблемы COR)

4) попытался использовать appcache для кэширования всех изображений в кэш браузера (не удалось, похоже, не работает, так как к нему не обращаются с веб-сервера)

ОБНОВЛЕНИЕ: я сейчас пытаюсь отредактировать исходный код Impact.image, чтобы попытаться преобразовать src в URL-адрес данных в точке загрузки в изображение

        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;
},

по какой-то причине изображение не загружается в функцию, будет ли оно работать, даже если я получу загрузку изображения для загрузки в функцию getBase64Image?

Answer 1

Если не считать того, что вы сохранили все как предварительно сгенерированный, Base-64 data-uris, который вы запекаете в файл JS, или тег сценария на своей странице "index.HTML", то здесь вам не повезет, особенно если ваше намерение состоит в том, чтобы распространить это среди аудитории, отключенной от веб-сервера (по крайней мере, предоставить домен для кэша приложений).

Имейте в виду, что для создания data-uris вам самим, вероятно, понадобится localhost (или инструмент сборки).