オブジェクトに画像を作成したので、キャンバスに描画できます...次のようにしました：
item[id].img = new Image();
item[id].img.src = './image_folder/'+data[i][j].image;
次に、キャンバスは次の行に描画されます。
canvas[2].ctx.drawImage(item[theID].imge, px, py);
正常に動作しますが、Chrome コンソールでは次のように表示されます。
Resource interpreted as Image but transferred with MIME type text/html
これが実際に何を意味し、どのように修正するのか興味がありますか?
サーバーに何かを要求すると、サーバーは送信されるものと一緒に「ヘッダー」を送信します。
これは、ブラウザーがビデオや音楽の使用方法を理解したり、JS や CSS を使用する方法を理解したりする方法です。
最新のブラウザーはこれらの処理について非常にインテリジェントですが、.mp3 の使用方法を知らないブラウザーに .mp3 を送信しようとすると、ファイルをテキストとして読み込もうとする可能性があり、多くのエラーが発生します。面白い文字の。
ほとんどの場合、MIME タイプはそれを回避できます。.mp3 のダウンロードを要求すると、サーバーは「Content-Type: audio/mpeg codecs=mp3」のようなヘッダーを送信する場合があります。
これに対し、通常の Web ページは「Content-Type: text/html」として送信され、.png 画像は「Content-Type: image/png」として送信されます。
WAMPインストーラーやEasyPHPなどを使用してインストールしたテストサーバーで遊んでいる場合、サーバーはおそらく.png「image/png」MIMEタイプのファイルを提供することを認識していません.
ファイルに間違った MIME タイプが与えられた場合、インテリジェントなブラウザはファイルの内容を読み取り、本来あるべき姿を把握しようとします (これが、最初に画像が機能する理由です)。
この特定のエラーは、おそらく誰にも害を及ぼすものではありません (.png ファイルを持っていることを認識できないブラウザーは、おそらく.png ファイルを持っていないブラウザーであるため<canvas>)。
しかし、それ以外の場合 (重要な.oggファイル<audio>や<video>サポートなど) でそれを修正するには、実行しているサーバーの種類 (私のお金は Apache にあります) を把握し、mime-type と file- を追加する方法を把握する必要があります。型宣言。
「Apache に MIME タイプを追加」などの Google 検索で見つけることができます。
これがインターネット上で稼働しているサーバーであり、ホスティングに料金を支払っている場合は、ホストされているサイトを通じて設定する必要があります。