ローカルホストを必要とせずにローカルで実行できる (file:///C:/... を使用) ことができる webapp (impact js ゲームエンジンで開発) を作成しようとしていますが、chrome で動作させる必要があります。 .
クロムで機能しない主な問題は、CORSの問題により、クロムがメディア（主にpng / jpgの画像）をメディアフォルダーからロードできないようにすることです。
数日間読んでいくつかの方法を試した後、この問題を解決できません。これについて経験のある方は、可能かどうか教えてください。可能であれば、これについてどのような方法をとればよいでしょうか。
私が試した方法：
1) img.crossOrigin = "anonymous" の設定 (失敗、これはまだ chrome によってブロックされています)
2) フラグ --allow-file-access-from-files を指定して chrome を開く (動作しましたが、エンド ユーザーにとって実行可能な方法ではありません)
3) 画像を読み取り、それらをデータ uri 形式に変換する (失敗しました。固有の COR の問題により、データ uri 変換が機能していないようです)
4) appcache を使用してすべての画像をブラウザーのキャッシュにキャッシュしようとしました (失敗しました。Web サーバーからアクセスされていないため、機能していないようです)
更新: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 関数に画像をロードしても機能しますか?