0

我正在尝试制作一个 webapp（使用 Impact js 游戏引擎开发），能够在不需要本地主机（使用 file:///C:/...）的情况下在本地运行，并且我需要让它在 chrome 上运行.

它在 chrome 上不起作用的主要问题是，由于 CORS 问题，chrome 会阻止我的媒体（主要是 png/jpg 中的图像）从媒体文件夹中加载。

在花了几天时间阅读并尝试了一些方法后，我无法解决这个问题。任何有这方面经验的人请告诉我是否可能，如果可能，我应该采取什么方法。

我尝试过的方法：

1) 设置 img.crossOrigin = "anonymous" （失败，这仍然被 chrome 屏蔽）

2）使用标志打开chrome --allow-file-access-from-files（有效，但对最终用户来说不是可行的方法）

3) 读取图像并将其转换为数据 uri 格式（失败，由于固有的 COR 问题，数据 uri 转换似乎无法正常工作）

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 函数中，它会起作用吗？

4

1 回答 1

0

如果没有将所有内容保存为预生成的 Base-64 数据 uri，您将其烘焙到 JS 文件或“index.HTML”页面上的脚本标签中，那么您在这里不会有太多的运气——尤其是如果您的意图是将其分发给与网络服务器断开连接的受众（至少为 appcache 提供域）。

请注意，为了生成 data-uris，您自己可能需要 localhost（或构建工具）。

于 2014-01-16T06:13:20.923 回答