1

繰り返しになりますが、完全に私の深さから外れていますが、いくつかの画像をプリロードしてから、「すべての要素（xmlファイルなどを含む）」がロードされたときにそれらをページに追加する必要があります。画像と参照は、後でアクセスできるように配列に保存されます。その配列から描画して画像化しようとするとエラーがスローされますが、ページに追加するだけで利用できることがわかります。

preloadImages: function (loadList, callback) {
    var img;
    var loadedFiles = [];
     var remaining = loadList.length;
   $(loadList).each(function(index, address ) {
     img = new Image();
    img.onload = function() {
         --remaining;
          if (remaining <= 0) {
                callback(loadedFiles);
            }
         };
 img.src = loadList[index];
     loadedFiles.push({file: 'name of image to be loaded', image: img }); //Store the image name for later refernce and the image
    });


}

//WHEN CERTAIN OTHER CONDITIONS EXIST I CALL THE FUNCTION BELOW

buildScreen: function ( imageLocs, image){
//THIS FUNCTION LOOPS THROUGH imageLocs (XML) AND CREATES CANVAS ELEMENTS, ADDING CLASSES ETC AND DRAWS PART OF A SPRITE (image) 
        //INTO THE CANVASES CREATED
    var ctx = $('ID of CANVAS').get(0).getContext("2d");
    var x =  'position x in imageLocs'
        var y =  'position y in imageLocs'
        var w =  'width in imageLocs'
        var h =  'position x in imageLocs'
        ctx.drawImage(image, x,y, w, h, 0, 0, w, h); //THIS THROWS AN ERROR 'TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement'
        //$(image).appendTo("#innerWrapper") //YET I KNOW THAT IT IS AVAILABE AS THIS LINE ADDS THE IMAGE TO THE PAGE
    }
4

2 に答える 2

3

問題

この問題は、jQueryオブジェクトをネイティブ関数に渡すために発生します。この場合ctx.drawImage、drawImageはネイティブオブジェクトのみをサポートします。

startSequence : function(){
  $('#innerWrapper').empty();
  var screenImageRef = $.grep(ST.imageFilesLoaded, function(e){ 
    return e.file == 'AtlasSheet'
  });
  var screenImage = $(screenImageRef[0].image);
  var imageLocsRef = $.grep(ST.xmlFilesLoaded, function(e){ 
    return e.file == 'IMAGELOCS'
  });
  var imageLocs = $(imageLocsRef[0].xml);
  //$(screenImage).appendTo("#innerWrapper") //appends screenImage 
  Utilis.buildScreen('1', imageLocs, screenImage, ST.didYouSeeIt, 'ST')
}

varscreenImageはによって作成され$(screenImageRef[0].image)ます。これにより、ネイティブ画像オブジェクトをラッパーするjQueryオブジェクトが返されます。元のネイティブ画像オブジェクトに戻すには、次を使用します。

screenImage.get(0)

また

screenImage[0]

前者はjQueryでサポートされている方法です。

解決

したがって、コードの修正は次のいずれかになります。次の行を変更します。

Utilis.buildScreen('1', imageLocs, screenImage.get(0), ST.didYouSeeIt, 'ST');

または、buildScreenメソッドの行を変更します。

ctx.drawImage(image.get(0), x,y, w, h, 0, 0, w, h);

...どちらでも構いません。

デバッグ時の混乱

画像を追加するときにすべてが機能しているように見える理由は、jQueryを使用して画像を追加しており、jQueryはjQueryでラップされた要素の受け渡しをサポートしているためです。使用しているネイティブ関数を追加しようとした場合、screenImageつまりElement.appendChild()同様のエラーが発生した場合。

将来的に役立つようにconsole.log、変数が実際にどのタイプ/構造を持っているかを調べるために使用するのが常に最善です。console.log以前の変数で使用すると、期待される出力やその他の画像/コンソール関連の出力（ブラウザーによって異なりますimage）ではなく、jQueryラッパーの奇妙なオブジェクトダンプ（アラームベルが鳴った可能性があります）が得られます。[object HTMLImageElement]

于 2013-02-18T11:45:40.677 に答える
1

imgすべての画像に同じ変数を使用しているため、画像プリローダーは完全には正しくないと思います。

これが私がうまく機能することを知っているものです：https ：//gist.github.com/eikes/3925183

于 2013-02-18T10:51:47.790 に答える