0

HTML の非表示セクションから JavaScript 配列に画像をロードするために使用している次の関数があります。

window.onload = function(){
console.log("src " + document.getElementById("building").src);
    var sources = {};
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        //sources[2] = document.getElementById("drink").src

    loadImages(sources, drawImage);
};

画像が JS 配列に読み込まれたら、「loadImages」関数を呼び出します。

function loadImages(sources, callback){
    var imagesDir = "";
    var images = {};
    var loadedImages = 0;
    var numImages = 0;

    console.log("length " + sources.length);
    for (var src in sources){
        numImages++;
    }
    console.log("Num Images " + numImages);

    var index=0;
    console.log("length " + sources.length);
    for (index=0;index < numImages ;index++){
        console.log(index);
        images[index] = new Image();
        images[index].src = imagesDir + sources[index];
        console.log("Adding " + sources[index]);
        callback(images[index]);
    }

    stage.add(imagesLayer); // should only be added once!!
}

次に、 drawImage() メソッドを呼び出します。

function drawImage(imageObj) {
    //var layer = new Kinetic.Layer();

    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,
      // puts the image in teh middle of the canvas
      x: stage.getWidth() / 2 - 50 / 2,
      y: stage.getHeight() / 2 - 50 / 2,
      draggable: true
    });

    // add cursor styling
    canvasImage.on('mouseover', function() {
      document.body.style.cursor = 'pointer';
    });
    canvasImage.on('mouseout', function() {
      document.body.style.cursor = 'default';
    });

    imagesLayer.add(canvasImage);
  }

このメソッドは、イメージをキャンバスの中央に描画し、'draggable' プロパティを true に設定して、キャンバス上でドラッグ アンド ドロップできるようにします。

JavaScript はすべて私のページにあり、キャンバスに描画したいすべての画像が最初に読み込まれる隠しセクションがあります。これを行ったのは、画像をソースから直接 JavaScript にロードする場合よりも、ブラウザーでの画像の読み込みと表示がはるかに高速になるためです。

画像は次の HTML で読み込まれます。

<img id="building" src="images/assets/building.png" alt="Asset" />
<img id="chair" src="images/assets/chair.gif" alt="Asset" />
<img id="drink" src="images/assets/drink.gif" alt="Asset" />
<img id="food" src = "images/assets/food.gif" alt="Asset"/>

約40枚ほどの画像をHTMLにロードしています

現在、キャンバスに「建物」と「椅子」の 2 つの画像を描画していますが、何らかの理由でsources[2] = document.getElementById("drink").src、キャンバスに 3 番目の画像を描画する行のコメントを外し、ブラウザーでページを表示すると、キャンバスが表示されません。 t が画面に表示され、次のようなコンソール エラーが表示されます。

キャッチされていない例外: [例外... "コンポーネントが失敗コードを返しました: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" 場所: "JS フレーム :: http://www.html5canvastutorials.com/libraries /kinetic-v4.1.2.js :: :: 行 4222" データ: なし]

Kinetic.js ライブラリ (http://kineticjs.com/) を使用していますが、このエラーがライブラリにあるように見えます...

これが事実であるかどうか誰かが知っていますか？または、このエラーが発生する原因となっているコードに何か問題がありますか?

4

2 に答える 2

0

ライブラリのエラーではなく、その画像のエラーです。間違った src プロパティを取得しているか、その画像がその場所に存在しません。URL、ファイルタイプ/名前が正しいことを確認してください。

于 2012-12-12T13:24:26.960 に答える